自定义样式工具提示
我想创建自定义样式的工具提示时悬停在链接上。
Google'd几乎整个互联网,并没有发现任何东西...
我想我的自定义工具提示有图像背景,可以有透明背景作为PNG图像。自定义样式工具提示
而且一些调整,使文本将出现在这样的背景下。 可能吗? :>
这是可能的,但是这取决于如果你希望它是防弹,对于比较容易的部分就可能变得很复杂:
- 制作一个
div
并将position
的值设置为fixed
或absolute
,然后将其设置为非常高的z-index
,并将您的图片设置为背景,并将默认设置为display:none
。 - 在每一个环节(或您要启用的工具提示为它添加一些
data
属性,在这个演示是data-tooltip-title
任何元素。 - 使用JavaScript,将鼠标悬停在“tooltipped”元素时,注入的价值
data-tooltip-title
属性作为工具提示文本,也top
和left
了“tooltipped”元素作为top
和left
工具提示的偏移,以及淡入工具提示。 - 在鼠标移开,淡入淡出的工具提示。
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”元素的文本包装在两行上。
- 工具提示的文本比工具提示宽度更长。
这些问题可以修复,但需要进一步实施。
这是非常好的开始,这是我需要的东西; D谢谢队友 user7350580
但是,你有一个想法,我怎么可以在那里添加新的行(标题旁边)?像data-tooltip-line1和data-tooltip-line2一样? – user7350580
以[fiddle](https://jsfiddle.net/dgxys80b/5/)为例 –
HTML title
属性(通常认为是“工具提示”)只能是文本。要做到你想要什么,看看引导“Popovers”:http://getbootstrap.com/javascript/#popovers
和一些可以包含图像的CSS/JS工具提示?我真的很想只为工具提示使用bootstrap。任何jsfiddle的例子都会很棒; D – user7350580
你不可能GOOGLE过多... https://jqueryui.com/tooltip/ War10ck
不知道你明白我的意思。你有没有看到提供的链接?我不想显示“只”工具提示。我想显示一个图片和文字的工具提示... – user7350580
jQuery UI可以做自定义内容的工具提示。去@ War10ck的链接,并阅读它 - 或[这里](http://jqueryui.com/tooltip/#custom-content) – fnostro