[javascript] Add a tooltip to a div

I have a div tag like this:

<div>
  <label>Name</label>
  <input type="text"/>
</div>

How can I displaying a tooltip on :hover of the div, preferably with a fade in/out effect.

This question is related to javascript html css tooltip

The answer is


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.


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

}

Here's a simple tooltip implementation that keeps into account the position of your mouse as well as the height and width of your window :

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

(see also this Fiddle)


I have developed three type fade effects :

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


Okay, here's all of your bounty requirements met:

  • No jQuery
  • Instant appearing
  • No dissapearing until the mouse leaves the area
  • Fade in/out effect incorporated
  • And lastly.. simple solution

Here's a demo and link to my code (JSFiddle)

Here are the features that I've incorporated into this purely JS, CSS and HTML5 fiddle:

  • You can set the speed of the fade.
  • You can set the text of the tooltip with a simple variable.

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

You can try bootstrap tooltips.

$(function () {
  $('[data-toggle="tooltip"]').tooltip()
})

further reading here


you can do it with simple css... jsfiddle here you can see the example

below css code for tooltip

[data-tooltip] {
  position: relative;
  z-index: 2;
  cursor: pointer;
}

/* Hide the tooltip content by default */
[data-tooltip]:before,
[data-tooltip]:after {
  visibility: hidden;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  pointer-events: none;
}

/* Position tooltip above the element */
[data-tooltip]:before {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-bottom: 5px;
  margin-left: -80px;
  padding: 7px;
  width: 160px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  background-color: #000;
  background-color: hsla(0, 0%, 20%, 0.9);
  color: #fff;
  content: attr(data-tooltip);
  text-align: center;
  font-size: 14px;
  line-height: 1.2;
}

/* Triangle hack to make tooltip look like a speech bubble */
[data-tooltip]:after {
  position: absolute;
  bottom: 150%;
  left: 50%;
  margin-left: -5px;
  width: 0;
  border-top: 5px solid #000;
  border-top: 5px solid hsla(0, 0%, 20%, 0.9);
  border-right: 5px solid transparent;
  border-left: 5px solid transparent;
  content: " ";
  font-size: 0;
  line-height: 0;
}

/* Show tooltip content on hover */
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
  visibility: visible;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: progid: DXImageTransform.Microsoft.Alpha(Opacity=100);
  opacity: 1;
}

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.


<div title="tooltip text..">
    Your Text....
</div>

Simple most way to add tooltip to your div element.


You can toggle a child div during onmouseover and onmouseout like this:

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

Example in Stack Snippets & jsFiddle

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


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

_x000D_
_x000D_
.tooltip{_x000D_
  position:relative;_x000D_
  display: inline-block;_x000D_
}_x000D_
.tooltip[data-title]:hover:after {_x000D_
  content: attr(data-title);_x000D_
  padding: 4px 8px;_x000D_
  color: #fff;_x000D_
  position: absolute;_x000D_
  left: 0;_x000D_
  top: 110%;_x000D_
  white-space: nowrap;  _x000D_
  border-radius: 5px;  _x000D_
  background:#000;_x000D_
}
_x000D_
<div data-title="My tooltip" class="tooltip">_x000D_
    <label>Name</label>_x000D_
    <input type="text"/>_x000D_
</div>_x000D_
    
_x000D_
_x000D_
_x000D_


You can make tooltip using pure CSS.Try this one.Hope it should help you to solve your problem.

HTML

<div class="tooltip"> Name
    <span class="tooltiptext">Add your tooltip text here.</span>
</div>

CSS

.tooltip {
        position: relative;
        display: inline-block;
        cursor: pointer;
    }

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 270px;
        background-color: #555;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        position: absolute;
        z-index: 1;
        bottom: 125%;
        left: 50%;
        margin-left: -60px;
        opacity: 0;
        transition: opacity 1s;
    }

    .tooltip .tooltiptext::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 50%;
        margin-left: -5px;
        border-width: 5px;
        border-style: solid;
        border-color: #555 transparent transparent transparent;
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
        opacity: 1;
    }

And my version

.tooltip{
display: inline;
position: relative; /** very important set to relative*/
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title); /**extract the content from the title */
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}

.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

Then the HTML

<div title="This is some information for our tooltip." class="tooltip">bar </div>

you can also use this as tooltip...It works same but you have to write extra tag thats it..

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

Without using any API You can do something like this too by using pure CSS and Jquery Demo

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

You can create custom CSS tooltips using a data attribute, pseudo elements and content: attr() eg.

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

Add Tooltip to a div

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

<div class="tooltip">Hover over me
  <span class="tooltiptext">Information</span>
</div>

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.


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

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

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.

Demo in Stack Snippets

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


<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI tooltip</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
  <script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>  
  <script>
  $(function() {
    $("#tooltip").tooltip();
  });
  </script>
</head>
<body>
<div id="tooltip" title="I am tooltip">mouse over me</div>
</body>
</html>

You can also customise tooltip style. Please refer this link: http://jqueryui.com/tooltip/#custom-style


The simplest way would be to set position: relative on the containing element and position: absolute on the tooltip element inside the container to make it float relative to the parent (containing element). For example:

<div style="background: yellow;">
    <div style="display: inline-block; position: relative; background: pink;">
        <label>Name</label>
        <input type="text" />

        <div style="background: #e5e5e5; position: absolute; top: -10px; left: 0; right: 0;">
            Tooltip text
        </div>
    </div>
</div>

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

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

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

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

    [data-tooltip]:hover:before {        
        opacity : 1;
    }
    
  4. Apply your styles (color, size, position etc) to the tooltip object; end of the 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, data-tooltip-persistent, and a simple rule:

[data-tooltip]:not([data-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 might 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.


Tooltips Position pure css

_x000D_
_x000D_
      div {_x000D_
        position: absolute;_x000D_
        top: 50%;_x000D_
        left: 50%;_x000D_
        transform: translate(-50%, -50%);_x000D_
        -ms-transform: translate(-50%, -50%); /* IE 9 */_x000D_
        -webkit-transform: translate(-50%, -50%); /* Chrome, Safari, Opera */ _x000D_
       _x000D_
        text-align: center;_x000D_
      }       _x000D_
 _x000D_
      .tooltip {_x000D_
        position: relative;_x000D_
        display: inline-block;_x000D_
        border-bottom: 1px dotted black;_x000D_
      }_x000D_
_x000D_
      .tooltip .tooltiptext {_x000D_
        visibility: hidden;_x000D_
        width: 120px;_x000D_
        background-color: black;_x000D_
        color: #fff;_x000D_
        //text-align: center;_x000D_
        border-radius: 6px;_x000D_
        padding: 5px 0;_x000D_
_x000D_
        /* Position the tooltip */_x000D_
        position: absolute;_x000D_
        z-index: 1;_x000D_
      }_x000D_
_x000D_
      .tooltip:hover .tooltiptext {_x000D_
        visibility: visible;_x000D_
      }  _x000D_
     _x000D_
      .toolLeft {_x000D_
        top: -5px;_x000D_
        right: 105%;_x000D_
      }     _x000D_
     _x000D_
      .toolRight {_x000D_
        top: -5px;_x000D_
        left: 105%;_x000D_
      }_x000D_
     _x000D_
      .toolTop {_x000D_
        bottom: 100%;_x000D_
        left: 50%;_x000D_
        margin-left: -60px;_x000D_
      }_x000D_
     _x000D_
      .toolBottom {_x000D_
        top: 100%;_x000D_
        left: 50%;_x000D_
        margin-left: -60px;_x000D_
      }
_x000D_
    <div>_x000D_
   _x000D_
      <div class="tooltip">Top <span class="tooltiptext toolTop">Tooltip text</span></div><br />_x000D_
      <div class="tooltip">Left  <span class="tooltiptext toolLeft">Tooltip text</span></div><br />   _x000D_
      <div class="tooltip">Right <span class="tooltiptext toolRight">Tooltip text</span></div><br />_x000D_
      <div class="tooltip">Bottom  <span class="tooltiptext toolBottom">Tooltip text</span></div><br />   _x000D_
   _x000D_
    </div>
_x000D_
_x000D_
_x000D_


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


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>


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to tooltip

Add tooltip to font awesome icon Adding a tooltip to an input box Tooltip with HTML content without JavaScript HTML-Tooltip position relative to mouse pointer Styling the arrow on bootstrap tooltips How do you change the width and height of Twitter Bootstrap's tooltips? Can I use complex HTML with Twitter Bootstrap's Tooltip? Tooltip on image Show data on mouseover of circle How to add a tooltip to an svg graphic?