Solved

jQuery and Hover

Posted on 2011-09-27
5
355 Views
Last Modified: 2012-05-12
I currently have an jQuery accordion plugin working on a list.  I want to add the ability to hover over one of the list items and see relavent info.

If I hover over Brokerage #1, I want to see Brokerage #1, Location: England, Producer Code: Brok1.

How do I do this?  An example of my actual UL is below.

 
<div class="accordion-content">
		  <ul>
            <li class="left-nav-selected"><a href="http://xxx?id=101" title="Willis of New York, Inc.">Willis of New York, Inc.</a><ul><li class="locations">Chicago<br/> Producer Code: PF68</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=102" title="Brokerage #1">Brokerage #1</a><ul><li class="locations">England<br/> Producer Code: Brok1</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=103" title="Brokerage #2">Brokerage #2</a><ul><li class="locations">Ireland<br/> Producer Code: Brok2</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=104" title="Brokerage #3">Brokerage #3</a><ul><li class="locations">Germany<br/> Producer Code: Brok3</li></ul></li>

Open in new window

0
Comment
Question by:jackjohnson44
[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
  • 4
5 Comments
 
LVL 53

Expert Comment

by:Huseyin KAHRAMAN
ID: 36711854
does "see relavent info" mean open it, or show data in a tooltip?
0
 

Author Comment

by:jackjohnson44
ID: 36711894
sorry, I'd like to see it in a tooltip/dialogue which disappears when you go away.  I think that a standard tool tip might be too small. Ideally Id like a div or something that I can apply style to.  They didn't mention this, but I am sure it is coming.

Thanks!
0
 
LVL 53

Expert Comment

by:Huseyin KAHRAMAN
ID: 36712092
something like this may work for you
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
<style>
/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(http://static.flowplayer.org/tools/img/tooltip/black_arrow.png);
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;	
}
</style>

<script>
    $(document).ready(function(){

$(".accordion-content ul li a[title]").tooltip();

    });
</script>

<div class="accordion-content">
		  <ul>
		  <li class="left-nav-selected"><a href="http://xxx?id=101" title="Willis of New York, Inc.">Willis of New York, Inc.</a><ul><li class="locations">Chicago<br/> Producer Code: PF68</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=102" title="Brokerage #1">Brokerage #1</a><ul><li class="locations">England<br/> Producer Code: Brok1</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=103" title="Brokerage #2">Brokerage #2</a><ul><li class="locations">Ireland<br/> Producer Code: Brok2</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=104" title="Brokerage #3">Brokerage #3</a><ul><li class="locations">Germany<br/> Producer Code: Brok3</li></ul></li>
			</ul>
</div>

Open in new window

0
 
LVL 53

Expert Comment

by:Huseyin KAHRAMAN
ID: 36712145
you can use positioning

$(".accordion-content ul li a[title]").tooltip({position: "bottom"});
0
 
LVL 53

Accepted Solution

by:
Huseyin KAHRAMAN earned 500 total points
ID: 36712180
a better example

go here for full demo and how to use this nice tooltip plug in for jQuery

http://flowplayer.org/tools/tooltip/index.html
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>
<style>
/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url(http://static.flowplayer.org/tools/img/tooltip/black_arrow.png);
	height:120px;
	width:210px;
	padding:25px;
	color:#fff;	
}
</style>

<script>
    $(document).ready(function(){

$(".accordion-content ul li a[title]").tooltip({position: "top center"});

    });
</script>

<div class="accordion-content">
		  <ul>
		  <li class="left-nav-selected"><a href="http://xxx?id=101" title="Willis of New York, Inc.">Willis of New York, Inc.</a><ul><li class="locations">Chicago<br/> Producer Code: PF68</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=102" title="Brokerage #1">Brokerage #1</a><ul><li class="locations">England<br/> Producer Code: Brok1</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=103" title="Brokerage #2">Brokerage #2</a><ul><li class="locations">Ireland<br/> Producer Code: Brok2</li></ul></li>
			<li class="left-nav-item"><a href="http://xxx?id=104" title="Brokerage #3">Brokerage #3</a><ul><li class="locations">Germany<br/> Producer Code: Brok3</li></ul></li>
			</ul>
</div>

Open in new window

0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

This article covers the basics of the Sass, which is a CSS extension language. You will learn about variables, mixins, and nesting.
I found this questions asking how to do this in many different forums, so I will describe here how to implement a solution using PHP and AJAX. The logical flow for the problem should be: Write an event handler for the first drop down box to get …
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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…

738 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