How can I make a simple mouseon popup tooltip with jQuery?

html, javascript, jquery, jquery-ui-tooltip, tooltip

Solution

An easy or simple way to do this, without a jQuery plugin, is by adding some simple rules to your CSS, and then no Javascript or jQuery is necessary. I don't really understand your need for the `table` though, and the CSS would be simpler if your were not using one.

table td {
  position: relative;
}

.tooltip {
  width: 400px;
  height: 300px;
  padding: 20px;
  border: 1px solid #ccc;
  box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, .3);
  border-radius: 3px;
  -webkit-border-radius: 3px;
  position: absolute;
  top: 5px;
  left: 50px;
  display: none;
}

.tooltip {
  z-index: 100;
}

.link {
  display: block;
  width: 9%;
}

.link:hover+.tooltip {
  display: block;
}

.tooltip:hover {
  display: block;
}

<table width="600">
  <tr>
    <td>
      <a href="#" class="link">Link-1</a>
      <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-2</a>
      <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-3</a>
      <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div>
    </td>
  </tr>
  <tr>
    <td>
      <a href="#" class="link">Link-4</a>
      <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </td>
  </tr>
</table>

Problem

I want to show related tooltip for listed info, related tooltip and info are in same cell in table. I don't want use a plugin for this. When `onmouseover` to any link, related tooltip displayed and if `onmouseover` to tooltip box, tooltip box will not close. When `onmouseout` any area on page except tooltip box or related link, tooltip box will close. I want to make a simple tooltip as like this plugin. Is there a simple way for this without using a plugin? HTML ``` <table width="600"> <tr> <td> <a href="#" class="link">Link-1</a> <div class="tooltip">(1) Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</div> </td> </tr> <tr> <td> <a href="#" class="link">Link-2</a> <div class="tooltip">(2) when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged</div> </td> </tr> <tr> <td> <a href="#" class="link">Link-3</a> <div class="tooltip">(3) It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop</div> </td> </tr> <tr> <td> <a href="#" class="link">Link-4</a> <div class="tooltip">(4) publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div> </td> </tr> </table> ``` CSS ``` table td { position:relative; } .tooltip { width:400px; height:300px; padding:20px; border:1px solid #ccc; box-shadow: 0 0 3px rgba(0,0,0,.3); -webkit-box-shadow: 0 0 3px rgba(0,0,0,.3); border-radius:3px; -webkit-border-radius:3px; position:absolute; top:5px; left:50px; display:none; } ``` jQuery ``` $(function(){ $('.link').hover( function(){ $(this).next().show(); }, function(){ $(this).next().hide(); } ) }) ``` JSFiddle http://jsfiddle.net/96j44/

Original source