カスタムスタイル付きツールチップ

Question

リンク上にホバーするときにカスタムスタイルのツールチップを作成したいと思います。
Googleはほぼ完全なインターネットを手に入れました。何も見つかりませんでした。
私のカスタムツールチップには、pngイメージのように透明な背景を持つことができるイメージの背景があります。

とテキストがその背景に表示されますので、いくつかの調整。 可能ですか？ ：

Answer 1

ことは可能であるが、それはあなたが、それは簡単な部分のための弾丸の証拠になりたい場合に応じて複雑になるかもしれない：

1. をdivに設定し、positionの値をfixedまたはabsoluteに設定してください。これは非常に高く、z-indexとし、画像を背景として設定します。デフォルトではdisplay:noneです。すべてのリンク（またはあなたはそれがいくつかの追加のツールチップを有効にする任意の要素data属性で
2. 、このデモでは、それはdata-tooltip-titleある。
3. 「tooltipped」要素の上にマウスを移動する場合、JavaScriptを使用して、値を注入ツールチップテキストとしてdata-tooltip-title属性、またtopとツールチップのためのtopとleftとして「tooltipped」要素のオフセットleft、および、マウスアウトで
4. 。でツールチップをフェードインアウトツールチップをフェード。

jsFiddle Demo

var links = $('[data-tooltip-title]'), 
 
    myTooltip = $('#my-tooltip'); 
 

 
links.each(function() { 
 
    var $this = $(this), 
 
    posLeft = $this.offset().left, 
 
    posTop = $this.offset().top, 
 
    title = $this.attr('data-tooltip-title'); 
 
    $this.hover(function() { 
 
    myTooltip.text(title).css({ 
 
     top: posTop + 20, 
 
     left: posLeft 
 
    }).fadeIn(); 
 
    }, function() { 
 
    myTooltip.fadeOut(); 
 
    }) 
 
})

#my-tooltip { 
 
    background: transparent url(//i.stack.imgur.com/ZNRfI.png) no-repeat; 
 
    width: 541px; 
 
    height: 113px; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 150px; 
 
    position: absolute; 
 
    left: -999px; 
 
    top: -999px; 
 
    z-index: 9999; 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="test-div"> 
 
    Pie jelly-o chocolate sweet topping jujubes tiramisu cupcake kitkat muffin biscuit. Sesame snaps jelly <a href="#" data-tooltip-title="demo text for custom tooltip #1">halvah caramels macaroon</a> powder cake sweet. Toffee jelly-o halvah. Muffin cake macaroon wafer. 
 
    Chocolate carrot cake chupa chups. Soufflé candy canes cake. Toffee soufflé sweet roll fruitcake sesame snaps brownie jelly-o. Marshmallow dessert biscuit topping gummies gummi bears ice cream cookie 
 
    <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur eum ducimus optio nesciunt <a href="#" data-tooltip-title="demo text for custom tooltip #2">porro delectus </a>nam ipsam voluptatem eaque, tempore voluptates enim? Maxime amet quas 
 
    unde eligendi recusandae esse cum? 
 
</div> 
 
<div id="my-tooltip"></div>

---

上記のカスタムツールチップが完璧に動作しないとき：

• "tooltipped" と、ブラウザウィンドウの非常に右または下の辺の間の距離ツールチップの幅よりもが小さく、です。
• "tooltipped"要素のテキストは2行に囲まれています。
• ツールチップのテキストがツールチップの幅よりも長い。

これらの問題は修正できますが、それ以上の実装が必要です。

Answer 2

HTML title属性（通常「ツールチップ」と見なされます）はテキストのみです。あなたが欲しいものを行うには、ブートストラップ「Popovers」を見てみましょう：http://getbootstrap.com/javascript/#popovers