自定义样式工具提示

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