[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Hover Message

Posted on 2011-04-29
10
Medium Priority
?
363 Views
Last Modified: 2012-05-11
Please tell me how I can display a hover message over a dropdown menu, using JavaScript.
If possible, please provide some sample code.

Thanks!
0
Comment
Question by:dshrenik
  • 4
  • 4
9 Comments
 
LVL 83

Accepted Solution

by:
leakim971 earned 2000 total points
ID: 35495809
You can modify dx and dy :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script language="javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script language="javascript">
	var dx = -8;
	var dy = -8;
	$(document).ready(function() {
		$("#dd").hover(function (e) {
			$("#d").css({"top":(e.pageY+dy)+"px","left":(e.pageX+dx)+"px"}).show();
		}, function() {
			$("#d").hide();
		});
	});
</script>
</head>
<body>
<select id="dd"><option>option1</option><option>option2</option></select>
<div id="d" style="display:none;position:absolute">MESSAGE</div>
</body>
</html>

Open in new window

0
 

Author Comment

by:dshrenik
ID: 35496049
Could you tell me what's dx and dy here?
Is there a simpler way?
0
 

Author Comment

by:dshrenik
ID: 35496069
And is something possible like an image on hover message?
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.

 
LVL 83

Expert Comment

by:leakim971
ID: 35497325
>Could you tell me what's dx and dy here?
dx and dy let you customize the position of the message over the dropdown

>Is there a simpler way?
"simpler" not as I know. A code with pure JS here : http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/CSS/Q_26581569.html

>And is something possible like an image on hover message?
Put anything you want inside the div
<div id="d" style="display:none;position:absolute"><img src="http://www.experts-exchange.com/expert/images/logo.jpg" />MESSAGE</div>

Open in new window

0
 

Author Comment

by:dshrenik
ID: 35502704
Well, I meant the background of the hover message should like like the message we get when we hover over an image, or a browser tab, for example.
0
 
LVL 143

Expert Comment

by:Guy Hengel [angelIII / a3]
ID: 36131094
I've requested that this question be deleted for the following reason:

This question has been classified as abandoned and is closed as part of the Cleanup Program. See the recommendation for more details.
0
 
LVL 83

Expert Comment

by:leakim971
ID: 36131095
http://a35495809

>Well, I meant the background of the hover message should like like the message we get when we hover over an image, or a browser tab, for example.
<< Put anything you want inside the div >>

0
 
LVL 83

Expert Comment

by:leakim971
ID: 36131913
dshrenik, sorry for the "delay"
0
 

Author Comment

by:dshrenik
ID: 36131922
Well, I'm sorry for the delay in awarding the points!
0

Featured Post

Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

Question has a verified solution.

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

Although a lot of people devote their energy toward marketing for specific industries, there are some basic principles that can be applied to any sector imaginable. We’ll look at four steps to take and examine how those steps were put into action fo…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
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…
Suggested Courses

834 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