Add a tooltip to a div

Question

I have a div tag like this    lt div gt     lt label gt Name lt  label gt     lt input type  text   gt   lt  div gt    How can I displaying a tooltip on  hover of the div  preferably with a fade in out effect

User · Answer

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   lt div title  This is some information for our tooltip   class  tooltip  gt bar  lt  div gt

User · Answer

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       lt div gt  x000D      x000D         lt div class  tooltip  gt Top  lt span class  tooltiptext toolTop  gt Tooltip text lt  span gt  lt  div gt  lt br   gt  x000D         lt div class  tooltip  gt Left   lt span class  tooltiptext toolLeft  gt Tooltip text lt  span gt  lt  div gt  lt br   gt     x000D         lt div class  tooltip  gt Right  lt span class  tooltiptext toolRight  gt Tooltip text lt  span gt  lt  div gt  lt br   gt  x000D         lt div class  tooltip  gt Bottom   lt span class  tooltiptext toolBottom  gt Tooltip text lt  span gt  lt  div gt  lt br   gt     x000D      x000D       lt  div gt  x000D   x000D   x000D

User · Answer

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    lt h1 gt FADE lt  h1 gt  x000D   x000D         lt div class  tooltip fade  data-title  Hypertext Markup Language  gt  x000D         lt label gt Name lt  label gt  x000D         lt input type  text   gt  x000D         lt  div gt  x000D         x000D   x000D       lt h1 gt EXPAND lt  h1 gt  x000D   x000D         lt div class  tooltip expand  data-title  Hypertext Markup Language  gt  x000D         lt label gt Name lt  label gt  x000D         lt input type  text   gt  x000D         lt  div gt  x000D         x000D   x000D       lt h1 gt SWING lt  h1 gt  x000D   x000D         lt div class  tooltip swing  data-title  Hypertext Markup Language  gt   x000D         lt label gt Name lt  label gt  x000D         lt input type  text   gt  x000D         lt  div gt  x000D        x000D   x000D   x000D

User · Answer

You can use title  it ll work for just about everything   lt div title  Great for making new friends through cooperation   gt    lt 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  gt    lt table title  Great job working for those who understand the way i feel  gt   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

User · Answer

You can toggle a child div during onmouseover and onmouseout like this   function Tooltip el  text      el onmouseover   function         el innerHTML      lt div class  tooltip  gt     text     lt  div gt            el onmouseout   function         el removeChild el querySelector   tooltip             Sample Usage Tooltip document getElementById  mydiv    hello im a tip div     Example in Stack Snippets  amp  jsFiddle   x000D   x000D  function Tooltip el  text    x000D    el onmouseover   function     x000D      el innerHTML      lt div class  tooltip  gt     text     lt  div gt   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   lt div id  mydiv  gt  This is just a div  lt  div gt  x000D   x000D   x000D

User · Answer

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    lt div style  background  yellow   gt       lt div style  display  inline-block  position  relative  background  pink   gt           lt label gt Name lt  label gt           lt input type  text    gt            lt div style  background   e5e5e5  position  absolute  top  -10px  left  0  right  0   gt              Tooltip text          lt  div gt       lt  div gt   lt  div gt

User · Answer

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    lt div style  background  yellow   gt       lt div id  tooltip-1  data-title  Tooltip Text  style  display  inline-block  position  relative  background  pink   gt           lt label gt Name lt  label gt           lt input type  text    gt       lt  div gt   lt  div gt    You could then create a tooltip-2 div the same way    you can of course also use the title attribute instead of data attribute

User · Answer

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    lt div id  wrapper  gt       lt div id  a  gt Hover over this div to see a cool tool tip  lt  div gt   lt  div gt    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

User · Answer

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

User · Answer

you can also use this as tooltip   It works same but you have to write extra tag thats it     lt abbr title  THis is tooltip  gt  lt  abbr gt

User · Answer

Without using any API You can do something like this too by using pure CSS and Jquery  Demo  HTML   lt div class  pointer tooltip  gt       Click  amp  Drag to draw the area  lt  div gt    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 lt 0         position left 10       else if position left  gt  width        position left width-10                         pointer tooltip   css  top  position top  px            pointer tooltip   css  left  position left  px

User · Answer

You don t need JavaScript for this at all  just set the title attribute    lt div title  Hello  World   gt     lt label gt Name lt  label gt     lt input type  text   gt   lt  div gt    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   lt div title  Hello  World   gt  x000D     lt label gt Name lt  label gt  x000D     lt input type  text   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

You can try bootstrap tooltips     function            data-toggle  tooltip     tooltip        further reading here

User · Answer

It can be done with CSS only  no javascript at all   running demo   Apply a custom HTML attribute  eg  data-tooltip  bla bla  to your object  div or whatever     lt div data-tooltip  bla bla  gt      something here  lt  div gt   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     Define  hover before hovering state of each  data-tooltip  to make it visible    data-tooltip  hover before               opacity   1     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

User · Answer

I did something that should be able to be adapted to a div as well   HTML   lt td gt       lt     Eval  Name   ToString   Length  gt  65    Eval  Name   ToString   Substring 0  60            Eval  Name    gt       lt span class  showonhover  gt           lt a href     gt  lt     Eval  Name   ToString   Length  gt  65     More         gt  lt  a gt           lt span class  hovertext  gt               lt    Eval  Name     gt           lt  span gt       lt  span gt   lt  td gt    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

User · Answer

You can make tooltip using pure CSS Try this one Hope it should help you to solve your problem   HTML   lt div class  tooltip  gt  Name      lt span class  tooltiptext  gt Add your tooltip text here  lt  span gt   lt  div gt    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

User · Answer

lt div title  tooltip text    gt      Your Text      lt  div gt    Simple most way to add tooltip to your div element

User · Answer

You can create custom CSS tooltips using a data attribute  pseudo elements and content  attr   eg   http   jsfiddle net clintioo gLeydk0k 11    lt div data-tooltip  This is my tooltip  gt       lt label gt Name lt  label gt       lt input type  text    gt   lt  div gt        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

User · Answer

For the basic tooltip  you want    lt div title  This is my tooltip  gt    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

User · Answer

Add Tooltip to a div   lt style gt   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     lt  style gt    lt div class  tooltip  gt Hover over me    lt span class  tooltiptext  gt Information lt  span gt   lt  div gt

User · Answer

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   lt div data-title  My tooltip  class  tooltip  gt  x000D       lt label gt Name lt  label gt  x000D       lt input type  text   gt  x000D   lt  div gt  x000D       x000D   x000D   x000D

User · Answer

Here s a nice jQuery Tooltip   https   jqueryui com tooltip   To implement this  just follow these steps    Add this code in your  lt head gt  lt  head gt  tags     lt script type  text javascript  src  http   cdn jquerytools org 1 2 5 full jquery tools min js  gt  lt  script gt       lt script type  text javascript  gt      title    tooltip     lt  script gt    lt style type  text css  gt       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     lt  style gt    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

User · Answer

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    lt p data-tooltip-position  right  data-tooltip  Some tooltip text here  title    gt Text Here lt  p gt    lt p data-tooltip-position  left  data-tooltip  Some tooltip text here  title    gt Text Here lt  p gt    lt p data-tooltip-position  top  data-tooltip  Some tooltip text here  title    gt Text Here lt  p gt    lt p data-tooltip-position  bottom  data-tooltip  Some tooltip text here  title    gt Text Here lt  p gt

User · Answer

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  lt  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  lt  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  lt  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   lt span class  couponcode  gt consectetur x000D  adipiscing lt span class  tooltip  gt This is a tooltip lt  span gt  lt  span gt  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  lt span x000D  class  couponcode  gt reprehenderit lt span class  tooltip  gt This is x000D  another tooltip lt  span gt  lt  span gt  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  lt span x000D  class  couponcode  gt laborum lt span class  tooltip  gt This is yet x000D  another tooltip lt  span gt  lt  span gt   x000D   x000D   x000D     see also this Fiddle

User · Answer

lt  doctype html gt   lt html lang  en  gt   lt head gt     lt meta charset  utf-8  gt     lt title gt jQuery UI tooltip lt  title gt     lt link rel  stylesheet  href  http   code jquery com ui 1 11 0 themes smoothness jquery-ui css  gt     lt script src  http   code jquery com jquery-1 10 2 js  gt  lt  script gt     lt script src  http   code jquery com ui 1 11 0 jquery-ui js  gt  lt  script gt       lt script gt      function             tooltip   tooltip             lt  script gt   lt  head gt   lt body gt   lt div id  tooltip  title  I am tooltip  gt mouse over me lt  div gt   lt  body gt   lt  html gt    You can also customise tooltip style  Please refer this link  http   jqueryui com tooltip  custom-style

User · Answer

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    lt div data-tooltip  your tooltip message  gt  lt  div gt    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  lt  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

[javascript] Add a tooltip to a div

Examples related to javascript

Examples related to html

Examples related to css

Examples related to tooltip