Search code examples
javascripthtmlcsstooltip

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.

Solution

  • For the basic tooltip, you want:

    <div title="This is my tooltip">

    like:

    .visible {
  height: 3em;
  width: 10em;
  background: yellow;
}
    <div title="This is my tooltip" class="visible"></div>

    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.