Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

jQuery and Hover

Posted on 2011-09-27
5
Medium Priority
?
359 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
  • 4
5 Comments
 
LVL 61

Expert Comment

by:HainKurt
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 61

Expert Comment

by:HainKurt
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 61

Expert Comment

by:HainKurt
ID: 36712145
you can use positioning

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

Accepted Solution

by:
HainKurt earned 2000 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: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying 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

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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?
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn how to count occurrences of each item in an array.
Suggested Courses

885 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