自定義樣式工具提示

Question

我想創建自定義樣式的工具提示時懸停在鏈接上。
Google'd幾乎整個互聯網，並沒有發現任何東西...
我想我的自定義工具提示有圖像背景，可以有透明背景作爲PNG圖像。

而且一些調整，使文本將出現在這樣的背景下。 可能嗎？ ：>

Answer 1

這是可能的，但是這取決於如果你希望它是防彈，對於比較容易的部分就可能變得很複雜：

1. 製作一個div並將position的值設置爲fixed或absolute，然後將其設置爲非常高的z-index，並將您的圖片設置爲背景，並將默認設置爲display:none。
2. 在每一個環節（或您要啓用的工具提示爲它添加一些data屬性，在這個演示是data-tooltip-title任何元素。
3. 使用JavaScript，將鼠標懸停在「tooltipped」元素時，注入的價值data-tooltip-title屬性作爲工具提示文本，也top和left了「tooltipped」元素作爲top和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」元素的文本包裝在兩行上。
• 工具提示的文本比工具提示寬度更長。

這些問題可以修復，但需要進一步實施。

Answer 2

HTML title屬性（通常認爲是「工具提示」）只能是文本。要做到你想要什麼，看看引導「Popovers」：http://getbootstrap.com/javascript/#popovers