Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

How do i get a popupBox on mouse over?

Posted on 2013-11-22
10
Medium Priority
?
263 Views
Last Modified: 2013-11-25
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
Comment
Question by:bmanmike39
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 58

Expert Comment

by:Gary
ID: 39670505
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
 

Author Comment

by:bmanmike39
ID: 39670511
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
 
LVL 58

Expert Comment

by:Gary
ID: 39670529
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 top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

 

Author Comment

by:bmanmike39
ID: 39670546
Thanks! This works, except when the page loads the info show for both before I mouses over then the disappear and work
0
 
LVL 58

Expert Comment

by:Gary
ID: 39670558
Add this to your CSS
[data-tooltip*="#"] {
    display:none
}

Open in new window

0
 

Author Comment

by:bmanmike39
ID: 39670570
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
 
LVL 58

Expert Comment

by:Gary
ID: 39670582
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
 

Author Comment

by:bmanmike39
ID: 39670596
It's exactly as it shows but i had 2 samples one in html and one in asp.net.  the html works.

Thanks!
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 39670598
So all good?
0
 

Author Closing Comment

by:bmanmike39
ID: 39676051
Thanks!!!
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

721 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question