我已准备好jQuery Script for Tooltip(我不是Javascript编码器)在我的网站上实施。
问题是,如果文本位于<a></a>
之间,则代码仅允许工具提示悬停。把它拿出来不会显示出效果。使用DIV在<a></a>
之间进行格式化并不是最好的方法。如何在<a></a>
Javascript
<script type="text/javascript">
$(document).ready(function() {
//Tooltips
$(".tip_trigger").hover(function(){
tip = $(this).find('.tip');
tip.show(); //Show tooltip
}, function() {
tip.hide(); //Hide tooltip
}).mousemove(function(e) {
var mousex = e.pageX + 20; //Get X coodrinates
var mousey = e.pageY + 20; //Get Y coordinates
var tipWidth = tip.width(); //Find width of tooltip
var tipHeight = tip.height(); //Find height of tooltip
//Distance of element from the right edge of viewport
var tipVisX = $(window).width() - (mousex + tipWidth);
//Distance of element from the bottom of viewport
var tipVisY = $(window).height() - (mousey + tipHeight);
if ( tipVisX < 20 ) { //If tooltip exceeds the X coordinate of viewport
mousex = e.pageX - tipWidth - 20;
} if ( tipVisY < 20 ) { //If tooltip exceeds the Y coordinate of viewport
mousey = e.pageY - tipHeight - 20;
}
tip.css({ top: mousey, left: mousex });
});
});
</script>
CSS
.tip {
color: #fff;
background:#1d1d1d;
display:none; /*--Hides by default--*/
padding:10px;
position:absolute; z-index:1000;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
HTML
<p>Text<a class="tip_trigger" href="#">MouseOver<span class="tip">
<img src="image.jpg" />Show as MouseOver Effect</span></a></p>
答案 0 :(得分:0)
例如,您可以使用<span/>
。
从技术上讲,只要你将类名tip_trigger
放在那里,它就会接受任何类型的元素。
<p>
Text
<span class="tip_trigger">MouseOver
<span class="tip"><img src="image.jpg" />Show as MouseOver Effect</span>
</span>
</p>
答案 1 :(得分:0)
我只是快速查看代码,一切似乎都没问题。它不是锚标记,它告诉您工具提示是什么或不是什么,但实际上是以下结构:
class ='tip_trigger'&gt;类= '末端'。
你可能在.tip类中有一个div .tip_trigger和其他标记,它应该有效。
所以,举个例子,问题是你在“a”标签内使用.tip_trigger,但你可以在“p”标签内使用它,如下所示:
<p class="tip_trigger"><a href="#">MouseOver<span class="tip">
<img src="image.jpg" />Show as MouseOver Effect</span>Text</a></p>
它应该可以正常工作。