WordPress 实现 tooltip 内容提示信息效果

Tooltip 也就是内容的提示信息，合理使用可以给用户比较好的体验。

实现方法有很多种，有很多JS 插件，我这里介绍的是纯CSS实现的方法，兼容性也比较靠谱,IE8+均可正常显示。实现方法也非常简单。

html结构

<a class="css-tooltip" href="http://fatesinger.com/73887" data-tooltip="137 likes with 3.43k reads">WordPress Theme Pivot</a>

可以看到关键有2点，意识有css-tooltip标签，二是用data-tooltip保存提示信息。

css代码

.css-tooltip{position:relative}
.css-tooltip:after{background-color:rgba(0,0,0,0.8);border-radius:3px;bottom:30px;color:#fff;content:attr(data-tooltip);display:none;font-size:12px;left:50%;line-height:1.3;padding:5px;position:absolute;text-align:center;width:160px;margin-left:-85px}
.css-tooltip:before{content:"";border:4px transparent solid;border-top-color:rgba(0,0,0,0.8);position:absolute;bottom:22px;left:50%;display:none;margin-left:-4px}
.css-tooltip:hover:after,.css-tooltip:hover:before{display:block}

PS

也可以使用.xxxx[data-tooltip]这种选择器。

尽量不要和title标签同时使用，会比较不美观。

【纯CSS 实现tooltip 内容提示信息效果-大发】 http://fatesinger.com/74304

附上另一种实现方法，来自 kn007

$('*').each(function(i){
    if(this.title){
        var aTitle=this.title;
        $(this).mouseover(function(e){
            this.title='';
            $('body').append('<div style="color: #5692BC;text-align: center;position: absolute;z-index: 999;display: none;background: black;font-size: 12px;border-radius: 3px;-moz-border-radius: 3px;-webkit-border-radius: 3px;box-shadow: 0 0 3px black;-moz-box-shadow: 0 0 3px #000;-webkit-box-shadow: 0 0 3px black;padding: 3px 8px;" id="tooltip">'+aTitle+'</div>');
            $('#tooltip').css({
    left:(e.pageX+30)+'px',top:(e.pageY+5)+'px',opacity:"0.8"
            }).show(250)
        }).mousemove(function(e){
            $('#tooltip').css({
    left:(e.pageX+30)+'px',top:(e.pageY+5)+'px'
            })
        }).mouseout(function(){
            this.title=aTitle;
            $('#tooltip').remove()
        }).mousemove(function(e){
            $('#tooltip').css({
    left:(e.pageX+30)+'px',top:(e.pageY+5)+'px'
            })
        })
    }
});

还有一种类似的：http://www.ctolib.com/topics-76878.html

/*
调用示例：
$(document).ready(function(){
$('.quicktip').quberTip({
 speed:200
});
});
<a href='' class='quicktip' title='Information about this link'>desktop publishing</a>
*/
jQuery.fn.quberTip = function (options) {
  var defaults = {
    speed: 500,
    xOffset: 10,
    yOffset: 10
  };
  var options = $.extend(defaults, options);
  return this.each(function () {
    var $this = jQuery(this);
    if ($this.attr('title') != undefined) {
      //Pass the title to a variable and then remove it from DOM
      if ($this.attr('title') != '') {
        var tipTitle = ($this.attr('title'));
      } else {
        var tipTitle = 'QuberTip';
      }
      //Remove title attribute
      $this.removeAttr('title');
      $(this).hover(function (e) {
        //      $(this).css('cursor', 'pointer');
        $("body").append("<div id='tooltip'>" + tipTitle + "</div>");
        $("#tooltip").css({ "position": "absolute",
          "z-index": "9999",
          "background": "#D3DDF5",
          "background-image": "url(../../Quber_Image/Quber_Common/Quber_TB_TitltBG.png)",
          "padding": "5px",
          "opacity": "0.9",
          "border": "1px solid #A3C0E8",
          "-moz-border-radius": "3px",
          "border-radius": "3px",
          "-webkit-border-radius": "3px",
          "font-weight": "normal",
          "font-size": "12px",
          "display": "none"
        });
        $("#tooltip")
.css("top", (e.pageY + defaults.xOffset) + "px")
      .css("left", (e.pageX + defaults.yOffset) + "px")
      .fadeIn(options.speed);
      }, function () {
        //Remove the tooltip from the DOM
        $("#tooltip").remove();
      });
      $(this).mousemove(function (e) {
        $("#tooltip")
  .css("top", (e.pageY + defaults.xOffset) + "px")
  .css("left", (e.pageX + defaults.yOffset) + "px");
      });
    }
  });
};