Force directed layout legend text mouseover

Issue

With the Mobile Patent Suit example by Mike Bostock as an example, I want to create mouseover event on legend. I want the script to work since I am new to JavaScript

Example:

<div id="sample"><ul><li><div>text</div><div class="tooltip">tooltip contents</div></li></ul></div>

tooltip contents should be display while I mouseover on div text (text).

Below is my code: kindly any one suggest how to do with this.

My CSS:

.tooltip {
position:absolute;
display:none;
z-index:1000;
background-color:black;
color:white;
border: 1px solid black;
}

My html:

<div id="sample"><ul><li><div>text</div><div class="tooltip">tooltip contents</div></li></ul></div>

Solution

<div id="sample">
   <ul><li><div>text</div><div class="tooltip">tooltip contents</div></li></ul>
</div>
<style>
#sample ul li div:first-child:hover+.tooltip
{
   display: block;
}
.tooltip {
   position:absolute;
   display:none;
   z-index:1000;
   background-color:black;
   color:white;
   border: 1px solid black;
}
</style>

Answered By - Ankit Agrawal