Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 265
  • Last Modified:

How do i get a popupBox on mouse over?

below is my code.  I don't know why it will not work.  Any help would be appreciated.

Script tag in header:
<script type="text/javascript">
    $("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);
}, function() {
    $($(this).data("tooltip")).hide();
});
    </script> 

Open in new window

CSS in header:
<style type="text/css">
        div {
    position: absolute;
    display: none;
    background: #ccc;
    border: 1px solid;
}
    </style>

Open in new window

Html in the body:
<a href="http://foo.com" data-tooltip="#foo">foo</a>
<br><br>
<a href="http://bar.com" data-tooltip="#bar">bar</a>

<div id="foo">foo means foo</div>
<div id="bar">bar means bar</div>

Open in new window

0
bmanmike39
Asked:
bmanmike39
  • 5
  • 5
1 Solution
 
GaryCommented:
Code works fine as is
http://jsfiddle.net/GaryC123/64UUp/

Are you including the jQuery library in the page?
Have you got a live link?
0
 
bmanmike39Author Commented:
This is what i have in the head:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Open in new window

0
 
GaryCommented:
Change your script to this and see if it works.

<script type="text/javascript">
$(function() {
    $("a").hover(function(e) {
    $($(this).data("tooltip")).css({
        left: e.pageX + 1,
        top: e.pageY + 1
    }).stop().show(100);
}, function() {
    $($(this).data("tooltip")).hide();
});
});
    </script>  

Open in new window

0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
bmanmike39Author Commented:
Thanks! This works, except when the page loads the info show for both before I mouses over then the disappear and work
0
 
GaryCommented:
Add this to your CSS
[data-tooltip*="#"] {
    display:none
}

Open in new window

0
 
bmanmike39Author Commented:
now nothing shows on page at all:

my CSS code:
<style type="text/css">
   div {
    position: absolute;
    display: none;
    background: #ccc;
    border: 1px solid;
    }
    [data-tooltip*="#"] {
    display:none
}

    </style>

Open in new window

0
 
GaryCommented:
I'm wrong remove that.

This is your code exactly as you should have it with my amendments - can you see anything different since the tooltips only show on mouseover.
http://jsfiddle.net/GaryC123/4bFDT/
0
 
bmanmike39Author Commented:
It's exactly as it shows but i had 2 samples one in html and one in asp.net.  the html works.

Thanks!
0
 
GaryCommented:
So all good?
0
 
bmanmike39Author Commented:
Thanks!!!
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

  • 5
  • 5
Tackle projects and never again get stuck behind a technical roadblock.
Join Now