在锚链接中添加工具提示 [英] Add tooltip in a anchor link

问题描述

我想在文本中添加工具提示，例如，如果我有这样的代码:

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/

这篇关于在锚链接中添加工具提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！