Solved

How to show tooltip  for Li tag

Posted on 2015-01-13
2
767 Views
Last Modified: 2015-01-14
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

0
Comment
Question by:SiemensSEN
2 Comments
 
LVL 13

Accepted Solution

by:
Edwin Hoffer earned 450 total points
ID: 40548217
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
 
LVL 10

Assisted Solution

by:Jeffrey Dake
Jeffrey Dake earned 50 total points
ID: 40548280
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

Featured Post

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
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…

747 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

Need Help in Real-Time?

Connect with top rated Experts

12 Experts available now in Live!

Get 1:1 Help Now