[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 269
  • 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
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
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

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

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