31

に表示されているプレーンな JavaScript でツールチップを作成しようとしていhoverます。プロファイル名にカーソルを合わせると、スタック オーバーフローのように adivが表示されます。

を使用してみonmouseoverましonmouseoutたsetTimeoutが、ユーザーがツールチップのコンテンツの上にマウスを移動するのに数秒かかるように追加しました。しかし、思ったようにうまくいきませんでした。

ライブラリを使用するよりも純粋な JavaScript が好きです。誰かが私を助けることができますか？

これは私が純粋な JavaScript で行ったことです。

HTML

<div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME
        <div class = "tooltip">
            PROFILE DETAILS
        </div>
    </div>

    <div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME 2
        <div class = "tooltip" >
            PROFILE DETAILS 2
        </div>
    </div>

    <div class = "name" onmouseover="show()" onmouseout="hide()">
    NAME 3
        <div class = "tooltip" >
            PROFILE DETAILS 3
        </div>
    </div>

CSS

.name{
        float:left;
        margin:100px;
        border:1px solid black;
    }
    .tooltip{
        position:absolute;
        margin:5px;
        width:200px;
        height:100px;
        border:1px solid black;
        display:none;
    }

JavaScript

var name = document.getElementsByclassName("name");
    var tp = document.getElementsByclassName("tooltip");

    function show(){
        tp.style.display="block";
    }
    function hide(){
        tp.style.display="";
    }
4

7 に答える 7

42

JavaScript を使用しないソリューション

これは CSS 疑似ホバーを使用して、隠し要素の表示を設定します。表示なしは、要素ではなくスタイルにある必要があるため、ホバーで上書きできます。

.couponcode:hover .coupontooltip {
  /* NEW */
  display: block;
}

.coupontooltip {
  display: none;
  /* NEW */
  background: #C8C8C8;
  margin-left: 28px;
  padding: 10px;
  position: absolute;
  z-index: 1000;
  width: 200px;
  height: 100px;
}

.couponcode {
  margin: 100px;
}
<div class="couponcode">First Link
  <span class="coupontooltip">Content 1</span>
  <!-- UPDATED -->
</div>

<div class="couponcode">Second Link
  <span class="coupontooltip"> Content 2</span>
  <!-- UPDATED -->
</div>

外部リンク

ファローアップ：

非常に古いブラウザをサポートする必要がある場合は、マウスが div に入ったときに外部要素にクラスを追加する必要があります。マウスが離れたら、そのクラスを削除します。

編集

tp とは何ですか? 要素のコレクションであり、それを 1 つとして扱っています。あなたがする必要があるのは、要素への参照を渡すことです

HTML:

<div class = "name" onmouseover="show(this)" onmouseout="hide(this)">  <!-- added "this" 2 times -->

**JavaScript:

//var name = document.getElementsByclassName("name");  /* not needed */
//    var tp = document.getElementsByclassName("tooltip"); /* not needed */


function show (elem) {  /* added argument */
    elem.style.display="block"; /* changed variable to argument */
}
function hide (elem) { /* added argument */
    elem.style.display="";  /* changed variable to argument */
}
于 2013-08-21T14:08:18.237 に答える
5

元のコードの修正

このようなものを探していて、このページにたどり着きました。それは私を助けましたが、それが機能するためにはコードを修正する必要がありました. これはあなたが試したことだと思います。「ID」でオブジェクトを参照する必要があります。これが私がやったことです、そしてそれはうまくいきます：

function show(elem) {
  elem.style.display = "block";
}

function hide(elem) {
  elem.style.display = "";
}
.name {
  float: left;
  margin: 100px;
  border: 1px solid black;
}

.tooltip {
  position: absolute;
  margin: 5px;
  width: 200px;
  height: 50px;
  border: 1px solid black;
  display: none;
}
<div class="name" onmouseover="show(tooltip1)" onmouseout="hide(tooltip1)">
  NAME
  <div class="tooltip" id="tooltip1">
    PROFILE DETAILS
  </div>
</div>

<div class="name" onmouseover="show(tooltip2)" onmouseout="hide(tooltip2)">
  NAME 2
  <div class="tooltip" id="tooltip2">
    PROFILE DETAILS 2
  </div>
</div>

<div class="name" onmouseover="show(tooltip3)" onmouseout="hide(tooltip3)">
  NAME 3
  <div class="tooltip" id="tooltip3">
    PROFILE DETAILS 3
  </div>
</div>

外部リンク

于 2014-01-20T08:21:37.463 に答える