我为Tooltip准备了jQuery脚本(我不是Javascript编码器)在我的网站上实现。
问题是,代码只允许工具提示悬停,如果文本之间的<a></a>
。把它扑灭不会显示出效果。在<a></a>
之间使用DIV和格式并不是最好的方法。我怎么能运行的Javascript效果也工作之外的<a></a>
<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>
我只是快速看了一下你的代码,一切似乎都很好。不是锚标记告诉你工具提示是什么或不是什么,而是下面的结构:
class='tip_trigger'>
你可以在它里面有一个div .tip_trigger和其他带有。tip类的标签,它应该可以工作。
因此,以您的示例为例,问题是您在"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>
例如,您可以使用<span/>
。
从技术上讲,它将接受任何类型的元素,只要你把类名tip_trigger
放在那里。
<p>
Text
<span class="tip_trigger">MouseOver
<span class="tip"><img src="image.jpg" />Show as MouseOver Effect</span>
</span>
</p>
看这里