好了，这是你满足的所有赏金要求:

没有jQuery 即时出现 直到老鼠离开这个区域才会消失 淡入/淡出效果纳入 最后. .简单的解决方案

下面是一个演示和我的代码链接(JSFiddle)

以下是我在这款纯JS、CSS和HTML5游戏中加入的功能:

你可以设置淡出的速度。 您可以使用一个简单的变量来设置工具提示的文本。

HTML:

<div id="wrapper">
    <div id="a">Hover over this div to see a cool tool tip!</div>
</div>

CSS:

#a{
    background-color:yellow;
    padding:10px;
    border:2px solid red;    
}

.tooltip{
    background:black;
    color:white;
    padding:5px;
    box-shadow:0 0 10px 0 rgba(0, 0, 0, 1);
    border-radius:10px;
    opacity:0;
}

JavaScript:

var div = document.getElementById('wrapper');
var a = document.getElementById("a");
var fadeSpeed = 25; // a value between 1 and 1000 where 1000 will take 10
                    // seconds to fade in and out and 1 will take 0.01 sec.
var tipMessage = "The content of the tooltip...";

var showTip = function(){    
    var tip = document.createElement("span");
    tip.className = "tooltip";
    tip.id = "tip";
    tip.innerHTML = tipMessage;
    div.appendChild(tip);
    tip.style.opacity="0"; // to start with...
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)+0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "1"){
            clearInterval(intId);
        }
    }, fadeSpeed);
};
var hideTip = function(){
    var tip = document.getElementById("tip");
    var intId = setInterval(function(){
        newOpacity = parseFloat(tip.style.opacity)-0.1;
        tip.style.opacity = newOpacity.toString();
        if(tip.style.opacity == "0"){
            clearInterval(intId);
            tip.remove();
        }
    }, fadeSpeed);
    tip.remove();
};

a.addEventListener("mouseover", showTip, false);
a.addEventListener("mouseout", hideTip, false);

你也可以使用这个作为工具提示…它的工作原理是一样的，但你必须写额外的标签。

<abbr title="THis is tooltip"></abbr>

仅css3的解决方案可以是:

CSS3:

div[id^="tooltip"]:after {content: attr(data-title); background: #e5e5e5; position: absolute; top: -10px; left:  0; right: 0; z-index: 1000;}

HTML5:

<div style="background: yellow;">
    <div id="tooltip-1" data-title="Tooltip Text" style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />
    </div>
</div>

然后你可以用同样的方法创建一个tooltip-2 div…当然，您也可以使用title属性而不是data属性。

我开发了三种类型的褪色效果:

/* setup tooltips */ .tooltip { position: relative; } .tooltip:before, .tooltip:after { display: block; opacity: 0; pointer-events: none; position: absolute; } .tooltip:after { border-right: 6px solid transparent; border-bottom: 6px solid rgba(0,0,0,.75); border-left: 6px solid transparent; content: ''; height: 0; top: 20px; left: 20px; width: 0; } .tooltip:before { background: rgba(0,0,0,.75); border-radius: 2px; color: #fff; content: attr(data-title); font-size: 14px; padding: 6px 10px; top: 26px; white-space: nowrap; } /* the animations */ /* fade */ .tooltip.fade:after, .tooltip.fade:before { transform: translate3d(0,-10px,0); transition: all .15s ease-in-out; } .tooltip.fade:hover:after, .tooltip.fade:hover:before { opacity: 1; transform: translate3d(0,0,0); } /* expand */ .tooltip.expand:before { transform: scale3d(.2,.2,1); transition: all .2s ease-in-out; } .tooltip.expand:after { transform: translate3d(0,6px,0); transition: all .1s ease-in-out; } .tooltip.expand:hover:before, .tooltip.expand:hover:after { opacity: 1; transform: scale3d(1,1,1); } .tooltip.expand:hover:after { transition: all .2s .1s ease-in-out; } /* swing */ .tooltip.swing:before, .tooltip.swing:after { transform: translate3d(0,30px,0) rotate3d(0,0,1,60deg); transform-origin: 0 0; transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:after { transform: translate3d(0,60px,0); transition: transform .15s ease-in-out, opacity .2s; } .tooltip.swing:hover:before, .tooltip.swing:hover:after { opacity: 1; transform: translate3d(0,0,0) rotate3d(1,1,1,0deg); } /* basic styling: has nothing to do with tooltips: */ h1 { padding-left: 50px; } ul { margin-bottom: 40px; } li { cursor: pointer; display: inline-block; padding: 0 10px; } <h1>FADE</h1> <div class="tooltip fade" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div> <h1>EXPAND</h1> <div class="tooltip expand" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div> <h1>SWING</h1> <div class="tooltip swing" data-title="Hypertext Markup Language"> <label>Name</label> <input type="text"/> </div>

不使用任何API 你也可以通过使用纯CSS和Jquery演示来做这样的事情

HTML

<div class="pointer_tooltip"> 
    Click & Drag to draw the area
</div>

CSS

.pointer_tooltip{
  width : auto;
  height : auto;
  padding : 10px;
  border-radius : 5px;
  background-color : #fff;
  position: absolute;
}

Jquery

$(document).mousemove(function( event ) {
    var pageCoords = "( " + event.pageX + ", " + event.pageY + " )";   

    //set the actuall width
    $('.pointer_tooltip').width($('.pointer_tooltip').width());
    var position_top = event.pageY+18;
    var position_left = event.pageX-60;          
    var width=$('body').width()-$('.pointer_tooltip').width();

    //check if left not minus
    if(position_left<0){
      position_left=10;
    }else if(position_left > width){
     position_left=width-10;
    }       


    $('.pointer_tooltip').css('top',position_top+'px');
    $('.pointer_tooltip').css('left',position_left+'px');
});

您可以使用数据属性，伪元素和内容创建自定义CSS工具提示:attr()等。

http://jsfiddle.net/clintioo/gLeydk0k/11/

<div data-tooltip="This is my tooltip">
    <label>Name</label>
    <input type="text" />
</div>

.

div:hover:before {
    content: attr(data-tooltip);
    position: absolute;
    padding: 5px 10px;
    margin: -3px 0 0 180px;
    background: orange;
    color: white;
    border-radius: 3px;
}

div:hover:after {
    content: '';
    position: absolute;
    margin: 6px 0 0 3px;
    width: 0;
    height: 0;
    border-top: 5px solid transparent;
    border-right: 10px solid orange;
    border-bottom: 5px solid transparent;
}

input[type="text"] {
    width: 125px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}