javascript - 自定义样式的工具提示

Question

我想在将鼠标悬停在链接上时创建自定义样式的工具提示。
谷歌几乎搜索了整个互联网，但一无所获......
我希望我的自定义工具提示具有可以像 png 图像一样具有透明背景的图像背景。

进行一些调整，以便文本出现在该背景上。可能的？ :>

Answer 1

这是可能的，但它可能会变得复杂，具体取决于您是否希望它是防弹的，对于简单的部分:

1. 创建 div并设置position值为 fixed或absolute ，给它很高z-index并将您的图像设置为其背景和 display:none默认情况下。
2. 在每个链接(或您想要为其启用工具提示的任何元素)中添加一些 data 属性，在本演示中为 data-tooltip-title 。
3. 使用 javascript，将鼠标悬停在“tooltipped”元素上时，注入(inject) data-tooltip-title 的值属性作为工具提示文本，也是 top和left “工具提示”元素的偏移量为 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>

<小时/>

上述自定义工具提示在以下情况下将无法正常工作:

• “工具提示”与浏览器窗口最右侧或底部之间的距离小于工具提示的宽度。
• “工具提示”元素的文本分为两行。
• 工具提示的文本比工具提示的宽度长。

这些问题可以解决，但需要进一步实现。