自定义样式工具提示

Question

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

进行一些调整，以便文本显示在该背景上。 可能？产品：＆gt;

Answer 1

HTML title属性（通常被视为“工具提示”）只能是文本。要做你想做的事，看看Bootstrap“Popovers”：http://getbootstrap.com/javascript/#popovers

Answer 2

这是可能的，但它可能会变得复杂，取决于你是否希望它是防弹，为了简单的部分：

1. 制作div并将position值设置为fixed或absolute，将其设为非常高z-index并将图片设置为背景{默认为{1}}。
2. 在每个链接（或您要为其启用工具提示的任何元素中添加一些display:none属性，在此演示中为data。
3. 使用javascript，将鼠标悬停在＆＃34;工具提示＆＃34; element，将data-tooltip-title属性的值注入工具提示文本，同时注入＆＃34;工具提示＆＃34;的data-tooltip-title和top偏移量。元素为left和top用于工具提示，并淡化工具提示。
4. 在mouseout上，淡出工具提示。

jsFiddle Demo

＆＃13;
＆＃13;
left
＆＃13;
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();
  })
})
＆＃13;
#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;
}
＆＃13;
＆＃13;
＆＃13;

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

• ＆＃34;工具提示＆＃34;之间的距离并且浏览器窗口的右下角 less 比工具提示的宽度小。
• ＆＃34;工具提示的文字＆＃34;元素包裹在两行上。
• 工具提示的文字长于工具提示宽度。

这些问题可以修复，但需要进一步实施。