jQuery and Hover

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

jackjohnson44Asked:
Who is Participating?
 
HainKurtConnect With a Mentor Sr. System AnalystCommented:
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
 
HainKurtSr. System AnalystCommented:
does "see relavent info" mean open it, or show data in a tooltip?
0
 
jackjohnson44Author Commented:
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
 
HainKurtSr. System AnalystCommented:
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
 
HainKurtSr. System AnalystCommented:
you can use positioning

$(".accordion-content ul li a[title]").tooltip({position: "bottom"});
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.