仅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>

这个问题有很多答案，但它仍然可能会帮助到一些人。它适用于所有左、右、上、下位置。

下面是css:

    .m-tb-5 {
        margin-top: 2px;
        margin-bottom: 2px;
    }
    [data-tooltip] {
        display: inline-block;
        position: relative;
        cursor: help;
        padding: 3px;
    }
    /* Tooltip styling */
    [data-tooltip]:before {
        content: attr(data-tooltip);
        display: none;
        position: absolute;
        background: #000;
        color: #fff;
        padding: 3px 6px;
        font-size: 10px;
        line-height: 1.4;
        min-width: 100px;
        text-align: center;
        border-radius: 4px;
    }
    /* Dynamic horizontal centering */
    [data-tooltip-position="top"]:before,
    [data-tooltip-position="bottom"]:before {
        left: 50%;
        -ms-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
    }
    /* Dynamic vertical centering */
    [data-tooltip-position="right"]:before,
    [data-tooltip-position="left"]:before {
        top: 50%;
        -ms-transform: translateY(-50%);
        -moz-transform: translateY(-50%);
        -webkit-transform: translateY(-50%);
        transform: translateY(-50%);
    }
    [data-tooltip-position="top"]:before {
        bottom: 100%;
        margin-bottom: 6px;
    }
    [data-tooltip-position="right"]:before {
        left: 100%;
        margin-left: 6px;
    }
    [data-tooltip-position="bottom"]:before {
        top: 100%;
        margin-top: 6px;
    }
    [data-tooltip-position="left"]:before {
        right: 100%;
        margin-right: 6px;
    }

    /* Tooltip arrow styling/placement */
    [data-tooltip]:after {
        content: '';
        display: none;
        position: absolute;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
    }
    /* Dynamic horizontal centering for the tooltip */
    [data-tooltip-position="top"]:after,
    [data-tooltip-position="bottom"]:after {
        left: 50%;
        margin-left: -6px;
    }
    /* Dynamic vertical centering for the tooltip */
    [data-tooltip-position="right"]:after,
    [data-tooltip-position="left"]:after {
        top: 50%;
        margin-top: -6px;
    }
    [data-tooltip-position="top"]:after {
        bottom: 100%;
        border-width: 6px 6px 0;
        border-top-color: #000;
    }
    [data-tooltip-position="right"]:after {
        left: 100%;
        border-width: 6px 6px 6px 0;
        border-right-color: #000;
    }

    [data-tooltip-position="left"]:after {
        right: 100%;
        border-width: 6px 0 6px 6px;
        border-left-color: #000;
    }
    /* Show the tooltip when hovering */
    [data-tooltip]:hover:before,
    [data-tooltip]:hover:after {
        display: block;
        z-index: 50;
    }

HTML标签可以是这样的:

<p data-tooltip-position="right" data-tooltip="Some tooltip text here" title=" > text here </p> .

<p data-tooltip-position="left" data-tooltip="Some tooltip text here" title=" > text here </p> .

<p data-tooltip-position="top" data-tooltip="Some tooltip text here" title=" > text here </p> .

<p data-tooltip-position="bottom" data-tooltip="Some tooltip text here" title=" > text here </p> .

下面是一个简单的工具提示实现，它可以考虑鼠标的位置以及窗口的高度和宽度:

function showTooltip(e) { var tooltip = e.target.classList.contains("tooltip") ? e.target : e.target.querySelector(":scope .tooltip"); tooltip.style.left = (e.pageX + tooltip.clientWidth + 10 < document.body.clientWidth) ? (e.pageX + 10 + "px") : (document.body.clientWidth + 5 - tooltip.clientWidth + "px"); tooltip.style.top = (e.pageY + tooltip.clientHeight + 10 < document.body.clientHeight) ? (e.pageY + 10 + "px") : (document.body.clientHeight + 5 - tooltip.clientHeight + "px"); } var tooltips = document.querySelectorAll('.couponcode'); for(var i = 0; i < tooltips.length; i++) { tooltips[i].addEventListener('mousemove', showTooltip); } .couponcode { color: red; cursor: pointer; } .couponcode:hover .tooltip { display: block; } .tooltip { position: absolute; white-space: nowrap; display: none; background: #ffffcc; border: 1px solid black; padding: 5px; z-index: 1000; color: black; } Lorem ipsum dolor sit amet, <span class="couponcode">consectetur adipiscing<span class="tooltip">This is a tooltip</span></span> elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in <span class="couponcode">reprehenderit<span class="tooltip">This is another tooltip</span></span> in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est <span class="couponcode">laborum<span class="tooltip">This is yet another tooltip</span></span>.

(也可以参看这把小提琴)

你可以像这样在onmouseover和onmouseout期间切换子div:

function Tooltip(el, text) {
  el.onmouseover = function() {
    el.innerHTML += '<div class="tooltip">' + text + '</div>' 
    }
  el.onmouseout = function() {
    el.removeChild(el.querySelector(".tooltip"))
  }
}

//Sample Usage
Tooltip(document.getElementById("mydiv"),"hello im a tip div")

Stack Snippets & jsFiddle中的例子

function Tooltip(el, text) { el.onmouseover = function() { el.innerHTML += '<div class="tooltip">' + text + '</div>' } el.onmouseout = function() { el.removeChild(el.querySelector(".tooltip")) } } //Sample Usage Tooltip(document.getElementById("mydiv"), "I'm a tooltip") #mydiv { position: relative; display: flex; align-items: center; justify-content: center; width: 120px; height: 50px; padding: 5px 10px; background-color: #e2f7ff; box-shadow: 1px 1px 1px 0px #cecece; } .tooltip { position: absolute; display: inline-block; white-space: nowrap; width: auto; height: auto; background-color: #11121b; color: white; padding: 4px 6px; border-radius: 3px; z-index: 99; left: 100%; top: 0; } <div id="mydiv"> This is just a div </div>

这是一个纯css3实现(可选JS)

你要做的唯一一件事就是在任何div上设置一个名为“data-tooltip”的属性，当你将鼠标悬停在它上面时，该文本将显示在它旁边。

我已经包含了一些可选的JavaScript，可以使工具提示显示在光标附近。如果您不需要这个特性，您可以放心地忽略这个小提琴的JavaScript部分。

如果您不希望在悬停状态上淡入，只需删除过渡属性。

它的样式类似于title属性工具提示。这是JSFiddle: http://jsfiddle.net/toe0hcyn/1/

HTML的例子:

<div data-tooltip="your tooltip message"></div>

CSS:

*[data-tooltip] {
    position: relative;
}

*[data-tooltip]::after {
    content: attr(data-tooltip);

    position: absolute;
    top: -20px;
    right: -20px;
    width: 150px;

    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity .15s ease-in-out;
    -moz-transition: opacity .15s ease-in-out;
    -ms-transition: opacity .15s ease-in-out;
    -o-transition: opacity .15s ease-in-out;
    transition: opacity .15s ease-in-out;

    display: block;
    font-size: 12px;
    line-height: 16px;
    background: #fefdcd;
    padding: 2px 2px;
    border: 1px solid #c0c0c0;
    box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.4);
}

*[data-tooltip]:hover::after {
    opacity: 1;
}

基于鼠标位置的工具提示位置更改的可选JavaScript:

var style = document.createElement('style');
document.head.appendChild(style);

var matchingElements = [];
var allElements = document.getElementsByTagName('*');
for (var i = 0, n = allElements.length; i < n; i++) {
    var attr = allElements[i].getAttribute('data-tooltip');
    if (attr) {
        allElements[i].addEventListener('mouseover', hoverEvent);
    }
}

function hoverEvent(event) {
    event.preventDefault();
    x = event.x - this.offsetLeft;
    y = event.y - this.offsetTop;

    // Make it hang below the cursor a bit.
    y += 10;

    style.innerHTML = '*[data-tooltip]::after { left: ' + x + 'px; top: ' + y + 'px  }'

}