How to show tooltip for Li tag

Hello,
  I have an li tag with some data. i would like to show the user the first 20 char of string and then onhover display the entire text

How can i do this?

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>

</head>
<body>
<ul>
  
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing 
  elit. Aenean commodo ligula eget dolor. Aenean 
  massa.</li>
  
<li>Cum sociis natoque penatibus et magnis dis 
  parturient montes, nascetur ridiculus mus. Donec quam 
  felis, ultricies nec, pellentesque eu, pretium quis, 
  sem.</li>
  
<li>Nulla consequat massa quis enim. Donec pede justo, 
  fringilla vel, aliquet nec, vulputate eget, arcu.</li>
  
<li>In enim justo, rhoncus ut, imperdiet a, venenatis 
  vitae, justo. Nullam dictum felis eu pede mollis 
  pretium. Integer tincidunt.</li>


</ul>

  
</body>
</html>

Open in new window

SiemensSENAsked:
Who is Participating?
 
Edwin HofferTechnical ExpertCommented:
What about this:

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>test</title>
</head>
<body>
<ul>
<li><span title="Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.">Lorem ipsum dolor si...</span></li>
<li><span title="Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.">Cum sociis natoque ...</span></li>
<li><span title="Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.">Nulla consequat mass...</span></li>
<li><span title="In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt.">In enim justo, rhonc...</span></li>
</ul>
</body>
</html>

Open in new window

0
 
Jeffrey Dake Senior Director of TechnologyCommented:
I am pretty sure you don't even need the span. Just put the title straight on the li.  http://www.w3schools.com/tags/ref_standardattributes.asp
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.