web-dev-qa-db-ja.com

jQueryを使用して簡単なmouseonポップアップツールチップを作成するにはどうすればよいですか？

リストされた情報に関連するツールチップを表示したいのですが、関連するツールチップと情報はテーブルの同じセルにあります。このためのプラグインは使いたくありません。

リンクへのonmouseoverの場合、関連するツールチップが表示され、ツールチップボックスへのonmouseoverの場合、ツールチップボックスは閉じません。ツールチップボックスまたは関連リンク以外のページ上の領域をonmouseoutすると、ツールチップボックスが閉じます。

このような簡単なツールチップを作成したい プラグイン 。プラグインを使用せずにこれを行う簡単な方法はありますか？

[〜＃〜] html [〜＃〜]

<table width="600">
<tr>
    <td>                                  
        <a href="#" class="link">Link-1</a>
        <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-2</a>
        <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-3</a>
        <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div>
    </td>
</tr>
<tr>
    <td>                        
        <a href="#" class="link">Link-4</a>
        <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </td>
</tr>
</table>

[〜＃〜] css [〜＃〜]

table td {
    position:relative;
}
.tooltip {
    width:400px;
    height:300px;
    padding:20px;
    border:1px solid #ccc;
    box-shadow: 0 0 3px rgba(0,0,0,.3);
    -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3);
    border-radius:3px;
    -webkit-border-radius:3px;
    position:absolute;
    top:5px;
    left:50px;
    display:none;
}

jQuery

$(function(){
    $('.link').hover(
        function(){
            $(this).next().show();
        },
        function(){
            $(this).next().hide();   
        }
    )   
})

JSFiddle

http://jsfiddle.net/96j44/

javascriptjqueryhtmltooltipjquery-ui-tooltip
7
midstack

JQueryプラグインなしでこれを行う簡単または簡単な方法は、CSSにいくつかの簡単なルールを追加することです。そうすれば、JavascriptやjQueryは必要ありません。 tableの必要性はよくわかりませんが、CSSを使用していなければ、CSSの方が簡単です。

table td {
  position: relative;
}

.tooltip {
  width: 400px;
  height: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  position: absolute;
  top: 5px;
  left: 50px;
  display: none;
}

.tooltip {
  z-index: 100;
}

.link {
  display: block;
  width: 9%;
}

.link:hover+.tooltip {
  display: block;
}

.tooltip:hover {
  display: block;
}
<table width="600">
  <tr>
    <td>
      <a href="#" class="link">Link-1</a>
      <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-2</a>
      <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-3</a>
      <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-4</a>
      <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </td>
  </tr>
</table>
10
Xotic750

とった。テーブルを使用していたため、tdは.tooltipの上にあり、mouseoutイベントは時間の前にトリガーされました。

したがって、基本的には、その問題を回避するために、周囲に応じてz-index:1;以上を追加する必要があります。

そして、jQueryは次のようになります。

$(function () {
    $('.link').on('mouseenter',
        function () {
            //if a tooltip is visible hide it so the right one can show up
            if ($('.tooltip').is(':visible')) {
                $('.tooltip').hide();
            }
            $(this).next().show();
    });
    $('.tooltip').on('mouseout',
        function () {
            $(this).hide();
    });
})

これが機能しています [〜＃〜] jsfiddle [〜＃〜] 、z-indexを取り出して何が起こっているかを確認したい場合に備えて、tdを強調表示します。

1
Fernando Silva