How to add a tooltip to a div-第2页回答

I have a div tag as follows:

<html>
    <head></head>
    <body>
        <div>
            <label>Name</label>
            <input type="text"/>
        </div>
    </body>
</html>

Now I want a simple javascript for displaying a tooltip on :hover the div. Can someone please help me out? The tooltip should also have a fade in/out effect.

标签： javascript html css css3 tooltip

25条回答

我欲成王，谁敢阻挡

2楼-- · 2019-01-03 01:12

A CSS3-only solution could be:

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>

You could then create a tooltip-2 div the same way... you can of course also use the title attribute instead of data attribute.

0人赞添加讨论(0) 举报

走好不送

3楼-- · 2019-01-03 01:12

You can use title. it'll work for just about everything

<div title="Great for making new friends through cooperation.">

<input script=JavaScript type=button title="Click for a compliment" onclick="window.alert('Your hair reminds me of a sunset across a prairie')" value="making you happy">

<table title="Great job working for those who understand the way i feel">

just think of any tag that can be visible to html window and insert a title="whatever tooltip you'd like" inside it's tag and you got yourself a tooltip.

0人赞添加讨论(0) 举报

Fickle 薄情

4楼-- · 2019-01-03 01:13

Here's a pure CSS 3 implementation (with optional JS)

The only thing you have to do is set an attribute on any div called "data-tooltip" and that text will be displayed next to it when you hover over it.

I've included some optional JavaScript that will cause the tooltip to be displayed near the cursor. If you don't need this feature, you can safely ignore the JavaScript portion of this fiddle.

If you don't want the fade-in on the hover state, just remove the transition properties.

It's styled like the title property tooltip. Here's the JSFiddle: http://jsfiddle.net/toe0hcyn/1/

HTML Example:

<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;
}

Optional JavaScript for mouse position-based tooltip location change:

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  }'

}

0人赞添加讨论(0) 举报

傲

5楼-- · 2019-01-03 01:14

For the basic tooltip, you want:

<div title="This is my tooltip">

For a fancier javascript version, you can look into:

http://www.designer-daily.com/jquery-prototype-mootool-tooltips-12632

The above link gives you 12 options for tooltips.

0人赞添加讨论(0) 举报

倾城　Initia

6楼-- · 2019-01-03 01:15

Try this. You can do it with only css and I have only added data-title attribute for tooltip.

.tooltip{
  position:relative;
  display: inline-block;
}
.tooltip[data-title]:hover:after {
  content: attr(data-title);
  padding: 4px 8px;
  color: #fff;
  position: absolute;
  left: 0;
  top: 110%;
  white-space: nowrap;  
  border-radius: 5px;  
  background:#000;
}

<div data-title="My tooltip" class="tooltip">
    <label>Name</label>
    <input type="text"/>
</div>

0人赞添加讨论(0) 举报

疯言疯语

7楼-- · 2019-01-03 01:15

There are lots of answers to this question but still may be it will help someone. It is for all left, right, top, bottom positions.

Here is the 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;
    }

And the HTML tag can be like this:

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

0人赞添加讨论(0) 举报

How to add a tooltip to a div

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间