本文介绍了在锚链接中添加工具提示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我想在文本中添加工具提示,例如,如果我有这样的代码:
I want to add a tooltip in a text so for example if I have a code like this:
<a href="http://google.com" title="The World's Largest Search Engine!">Google!</a>
在鼠标悬停时,我想显示该工具提示.使用 title
是一个好方法,但我怎样才能设计得更好看呢?任何帮助:JSFIDDLE
On mouse hover, I want to show that tooltip.Using title
is a good way but how can I style to look it better? Any help:JSFIDDLE
推荐答案
如果您想使用 jquery 动态创建它,您可以执行以下操作:
If you wish to create it dynamically using jquery, you may do the following :
<a href="http://google.com" data-title="The World's Largest Search Engine!">Google!</a>
<style>
.box
{
border: 1px solid green;
position:absolute;
color: white;
top: 19px;
left: 30px;
background-color: black;
}
</style>
<script>
$().ready(function(){
$( "a" ).hover(
function() {
var title = $(this).attr("data-title"); // extracts the title using the data-title attr applied to the 'a' tag
$('<div/>', { // creates a dynamic div element on the fly
text: title,
class: 'box'
}).appendTo(this); // append to 'a' element
}, function() {
$(document).find("div.box").remove(); // on hover out, finds the dynamic element and removes it.
}
);
});
</script>
示例:http://jsfiddle.net/9RxLM/5164/
这篇关于在锚链接中添加工具提示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!