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

2

7

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/

Phifer answered 20/2, 2014 at 20:29 Comment(9)
Try removing the .hide() and use .mouseenter() to show it. Then to close it target both .link and .tooltip on the .mouseout() event.Claire
No Javascript or jQuery necessary, just css jsfiddle.net/Xotic750/9kBVuLaine
@Laine Sorry, but that doesn't seem to be the question. The tooltip should stay visible after the mouseoverClaire
Ok that part of the question didn't register, but it does the same as his jQuery example. I didn't see that he wanted it to be "sticky". I'm sure there are lots of answers here on SO.Laine
@Phifer Almost got it... seems to only do the propper "thing" on tooltip4, can't see why, but I'll keep at it after dinner. Catch you in a bit and good luck. jsfiddle.net/ZeNz0r/96j44/3Claire
@FernandoSilva thank you but not exactly what I want. I want to close tooltip when mouseout link or tooltip box, but if mouseover on tooltip box, box will not closePhifer
yes I know that, but this works with using plugin (for example: stevenbenner.github.io/jquery-powertip (Mouse on to popup example).) But I don't want to use any plugin for this and I asked for an easy way of doing this without using plugin @LainePhifer
@Phifer try Link-4 it won't close, only when you leave the tooltip. Going to try and see why the rest isn't doing the same.Claire
Is there any reason for the table in your example?Laine
L
11

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>
Laine answered 20/2, 2014 at 20:50 Comment(3)
@Fernando Silva Updated answer now the problem has become clearer, please check now and look at your voting.Laine
I didn't downvote you. Anyone could missread this question. I will upvote you though, that is a clean solution. And I just learned about the + in CSS as well, gotta read up on it^^Claire
No problem, I thought it was you as it happened while we discussed it. I apologise.Laine
C
1

Got it. Since you were using a table, the td's were above the .tooltip's and the mouseout event was triggered before time.

So basically you need to add z-index:1; or higher depending on the surroundings to avoid that problem.

And your jQuery would 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, highlighted the td's in case you want to take out the z-index and see what was going on.

Claire answered 20/2, 2014 at 21:52 Comment(8)
you need to add table mouseleave event as well, so if you move the mouse below link 4, it would hide tooltip.Literature
@CanerAkdeniz roger that, i'll try to fit it in, when i get to work. Thks^^Claire
@CanerAkdeniz I just saw what you mean, but adding the table, like this $('.tooltip, table').on('mouseout'... and then $('.tooltip').hide() so the table doesn't hide just hides the tooltip too soon. Check it out: jsfiddle.net/ZeNz0r/96j44/7Claire
Downvoting and not explaining, won't help me learn. I don't mind the downvote, but not knowing why doesn't let me improve in any way :(Claire
One would assume because of the comment that @Caner Akdeniz left.Laine
i didnt downvote, i was actually surprised why it was downvoted. your solution is working pretty well. just neede couple tweaks.Literature
Did you get any further with tweaking this solution?Laine
@Laine Not yet, need to get a selector for the mouseout event that hides the tooltip if the mouse leaves .tooltip or table but ´.tooltip table´ and ´.tooltip, table´ aren't working since the 1st means a table with that class, and the second fires as soon as he leaves the anchor. Haven't had much time, but I'm trying to get there.Claire

© 2022 - 2024 — McMap. All rights reserved.