CODEWITHSUNDEEP
htmlcss
Giant
Giant

Reputation: 1649

attriibute title box change width and height css only

<li><a class="fancypdf" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Proin eget mattis enim. Nam at laoreet sapien. Nulla facilisi. Aenean commodo egestas 
odio id bibendum. Vestibulum commodo, justo et dignissim congue, dolor sem finibus nisi, 
ac tempus risus lacus nec justo. Fusce tincidunt ante nec malesuada imperdiet." 
href="pdf/pdffile.pdf">`if hover title will appear`</a><br></li>

This is a list with attribute title with it when you hover it a box with appear with the content of title but if the title is long like my example the box with be very width what i want is the box to be just enough wide and extend in height. Is there a way to do this without using like this. This fiddle is all i can see to do this kind of css style

UPDATE

this is the css i used

a[title]:hover:after {
  content: attr(title);
  width:600px;
}

Upvotes: 0

Views: 5399

Answers (1)

Paul
Paul

Reputation: 9012

If I get it right, you want to disable the default title tooltip for elements and make your own, which should look very similar to the default one. The problem with your example fiddle is, that along with the custom CSS tooltip, the browser also shows the default tooltip (with a delay).

To change that, you could turn title attributes to data-title attributes and change the CSS accordingly:

a[title]:hover:after { content: attr(title); ... }

must be changed to 

a[data-title]:hover:after { content: attr(data-title); ... }

See the DEMO. The first link has only the custom CSS tooltip, the second link shows the default browser tooltip.

Upvotes: 1

Related Questions