使标题属性在悬停时立即显示

title属性的处理依赖于浏览器，没有定义任何API来控制它，更不用说在规范中指定了。这包括延迟、显示持续时间、使用的字体、字体大小等。

还有其他技术可以使用而不是title属性。其中一些问题已在其他答复中提及。请注意，简单的"CSS工具提示"可以在纯CSS中实现，非常简单和灵活。使用这些技术时，要显示的数据通常是title属性中的而不是，因为它的处理取决于浏览器，因此有可能使您的特殊工具提示显示和浏览器对title的实现。尽管可以防止后者，但当启用脚本时，使用对任何内容都没有默认影响的属性（如data-title=...或data-tooltip=...）会更简单。

一种方法：

// textFrom : String, the attribute from which the text
//            should come,
// delta :    String or Number, the distance from the cursor at
//            which the tooltip should appear
function instantTooltips(textFrom, delta) {
  // if delta exists, and can be parsed to a number, we use it,
  // otherwise we use the default of 5:
  delta = parseFloat(delta) ? parseFloat(delta) : 5;
  // function to handle repositioning of the created tooltip:
  function reposition(e) {
    // get the tooltip element:
    var tooltip = this.nextSibling;
    // setting the position according to the position of the
    // pointer:
    tooltip.style.top = (e.pageY + delta) + 'px';
    tooltip.style.left = (e.pageX + delta) + 'px';
  }
  // get all elements that have an attribute from which we
  // want to get the tooltip text from:
  var toTitle = document.querySelectorAll('[' + textFrom + ']'),
    //create a span element:
    span = document.createElement('span'),
    // find if we should use textContent or innerText (IE):
    textProp = 'textContent' in document ? 'textContent' : 'innerText',
    // caching variables for use in the upcoming forEach:
    parent, spanClone;
  // adding a class-name (for CSS styling):
  span.classList.add('createdTooltip');
  // iterating over each of the elements with a title attribute:
  [].forEach.call(toTitle, function(elem) {
    // reference to the element's parentNode:
    parent = elem.parentNode;
    // cloning the span, to avoid creating multiple elements:
    spanClone = span.cloneNode();
    // setting the text of the cloned span to the text
    // of the attribute from which the text should be taken:
    spanClone[textProp] = elem.getAttribute(textFrom);
    // inserting the created/cloned span into the
    // document, after the element:
    parent.insertBefore(spanClone, elem.nextSibling);
    // binding the reposition function to the mousemove
    // event:
    elem.addEventListener('mousemove', reposition);
    // we're setting textFrom attribute to an empty string
    // so that the CSS will still apply, but which
    // shouldl still not be shown by the browser:
    elem.setAttribute(textFrom, '');
  });
}
// calling the function:
instantTooltips('title', 15);

[title] {
  display: block;
  margin: 0 0 1em 0;
}
/*
  hiding, and styling, the elements we'll be creating
*/
[title] + span.createdTooltip {
  display: none;
  border: 2px solid #f90;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 0.2em 0.5em;
  border-radius: 0.75em;
}
/*
  showing the created elements on hovering the element we want to
  show tooltips for
*/
[title]:hover + span.createdTooltip {
  display: block;
  position: absolute;
}

<span title="This is the span's title">A span element</span>
<img src="http://placekitten.com/g/250/250" title="A kitten." />
<input title="This is an input element's title." value="This input has a title" />

参考文献：

• 条件（'ternary'）运算符
• document.createElement()
• document.querySelectorAll()
• Element.classList
• in操作员
• CCD_ 11
• Node.nextSibling
• Node.parentNode
• parseFloat()
• typeof

您不能使用默认的工具提示，但可以使用jQuery插件进行工具提示或引导。最好的方法是创建自定义工具提示。

http://tech.pro/tutorial/930/jquery-custom-tooltips

这里有一些你可以使用的参考资料

简单提示：http://craigsworks.com/projects/simpletip/

引导程序：http://getbootstrap.com/javascript/#tooltips

Bootstraps ToolTip插件在这方面做得很好，响应速度更快。

只需要运行默认的引导文件即可。

CSS可以根据您的要求进行更改。

更多信息和示例可以在这里显示：

http://getbootstrap.com/javascript/#tooltips

您可以在mouseover上隐藏tite并附加一个span。然后删除跨度并在mouseout 上恢复标题

$('a').hover(function(e){
    title = $(this).attr('title');
    $(this).append('<span>Im Super Fast!!!</span>')
    $(this).removeAttr('title');
},
function(e){
    $('span', this).remove();
    $(this).attr('title',title);
});

检查示例-http://jsfiddle.net/1z3catx3/1/

注意：您当然需要对span 进行样式设置

托盘，带有框阴影和边框阵列：

$('a').hover(function(e){
    title = $(this).attr('alt');
    $(this).append('<span>'+title+'</span>')

},
function(e){
    $('span', this).remove();

});

http://jsfiddle.net/1z3catx3/112/

<!DOCTYPE html>
<html>
<head>
  <style>
    
    [data-title]:hover:after {
      opacity: 1;
      transition: all 0.1s ease 0.5s;
      visibility: visible;
    }
    
    [data-title]:after {
      content: attr(data-title);
      position: absolute;
      bottom: -1.6em;
      z-index: 99999;
      visibility: hidden;
      white-space: nowrap;
      background-color: lightgray;
      color: #111;
      font-size: 90%;
      font-weight: lighter;
      padding: 1px 5px 2px 5px;
      box-shadow: 1px 1px 3px #222222;
      opacity: 0;
      border: 1px solid #111111;
      border-radius: 5px 5px 5px 5px;
    }
    
    [data-title] {
      position: relative;
    }
  </style>
</head>
<body>
<p data-title="also you can put it here for toltip other element ">my element </p>
</body>