How to add a tooltip to a div

How to add a tooltip to a div

I have a div tag as follows:




Now I want a simple JavaScript for displaying a tooltip on :hover the div. The tooltip should also have a fade in/out effect.

Solutions/Answers:

Solution 1:

For the basic tooltip, you want:

<div title="This is my tooltip">

For a fancier javascript version, you can look into:

https://jqueryhouse.com/best-jquery-tooltip-plugins/

The above link gives you 25 options for tooltips.

Solution 2:

It can be done with CSS only, no javascript at all : running demo

  1. Apply a custom HTML attribute, eg. tooltip="bla bla" to your object (div or whatever):

    <div tooltip="bla bla">
        something here
    </div>
    
  2. Define the :before pseudoelement of each [tooltip] object to be transparent, absolutely positioned and with tooltip="" value as content:

    [tooltip]:before {            
        position : absolute;
         content : attr(tooltip);
         opacity : 0;
    }
    
  3. Define :hover:before hovering state of each [tooltip] to make it visible:

    [tooltip]:hover:before {        
        opacity : 1;
    }
    
  4. Apply your styles (color, size, position etc) to the tooltip object; end of story.

In the demo I’ve defined another rule to specify if the tooltip must disappear when hovering over it but outside of the parent, with another custom attribute, tooltip-persistent, and a simple rule:

[tooltip]:not([tooltip-persistent]):before {
    pointer-events: none;
}

Note 1: The browser coverage for this is very wide, but consider using a javascript fallback (if needed) for old IE.

Note 2: an enhancement may be adding a bit of javascript to calculate the mouse position and add it to the pseudo elements, by changing a class applied to it.

Solution 3:

You don’t need JavaScript for this at all; just set the title attribute:

<html><head></head>
<body>
<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>
</body>
</html>

Note that the visual presentation of the tooltip is browser/OS dependent, so it might fade in and it might not. However, this is the semantic way to do tooltips, and it will work correctly with accessibility software like screen readers.

See:

<div title="Hello, World!">
<label>Name</label>
<input type="text"/>
</div>

Solution 4:

Here’s a nice jQuery Tooltip:

https://jqueryui.com/tooltip/

To implement this, just follow these steps:

  1. Add this code in your <head></head> tags:

    <script type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/full/jquery.tools.min.js"></script>    
    <script type="text/javascript">
    $("[title]").tooltip();
    </script> 
    <style type="text/css"> 
    
    /* tooltip styling. by default the element to be styled is .tooltip  */
    .tooltip {
        display:none;
        background:transparent url(https://dl.dropboxusercontent.com/u/25819920/tooltip/black_arrow.png);
        font-size:12px;
        height:70px;
        width:160px;
        padding:25px;
        color:#fff;
    }
    </style> 
    
  2. On the HTML elements that you want to have the tooltip, just add a title attribute to it. Whatever text is in the title attribute will be in the tooltip.

Note: When JavaScript is disabled, it will fallback to the default browser/operating system tooltip.

Solution 5:

I did something that should be able to be adapted to a div as well.

HTML

<td>
    <%# (Eval("Name").ToString().Length > 65) ? Eval("Name").ToString().Substring(0, 60) + "..." : Eval("Name")%>
    <span class="showonhover">
        <a href="#"><%# (Eval("Name").ToString().Length > 65) ? "More" : "" %></a>
        <span class="hovertext">
            <%# Eval("Name") %>
        </span>
    </span>
</td>

CSS

.showonhover .hovertext { display: none;}
.showonhover:hover .hovertext {display: inline;}
a.viewdescription {color:#999;}
a.viewdescription:hover {background-color:#999; color: White;}
.hovertext {position:absolute;z-index:1000;border:1px solid #ffd971;background-color:#fffdce;padding:11px;width:150px;font-size: 0.75em;}

For a more in-depth discussion, see my post:

A simple Formatted ToolTip text on hover

Solution 6:

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

}