Geek Answers Handbook

How can I make a simple mouse tooltip using jQuery?

I want to show a related tooltip for the listed information, related tooltips and information are in the same cell of the table. I do not want to use the plugin for this.

When onmouseover to any link displays a corresponding tooltip, and if onmouseover to a tooltip, the tooltip does not close. When onmouseout any area on the page except the tooltip or related link, the tooltip closes.

I want to make a simple hint like this plugin . Is there an easy way to do 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 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/

+7
source share
2 answers

An easy or simple way to do this without the jQuery plugin is to add some simple rules to your CSS and then no Javascript or jQuery. I really don't understand your need for table , although CSS will be easier if you don't use it.

 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 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>
+10
source

Got it. Since you used the table, td was above .tooltip , and the mouseout event was fired before time.

Therefore you need to add z-index:1; or higher depending on the environment to avoid this problem.

And your jQuery will be like this:

 $(function () { $('.link').on('mouseenter', function () { //if a tooltip is visible hide it so the right one can show up if ($('.tooltip').is(':visible')) { $('.tooltip').hide(); } $(this).next().show(); }); $('.tooltip').on('mouseout', function () { $(this).hide(); }); })

Here's a working JSFIDDLE highlighting td if you want to take out the z-index and see what happens on.

+1
source

More articles:


All Articles