mouseover text / tooltip help!
Replies
hi, so i'm trying to figure out how to get mouseover text (tooltips) on a pet profile but i can't do it? i've searched google and old topics on here for answers but those codes don't seem to work at all! i've tried the following:
This is the text I want to have a mousover
AND
This is the text I want to have a mousover
but neither way actually works. i place the tags around the text i want to have the tooltip, but when you hover over the text, no tooltip appears! does anyone know how to do this? am i doing something wrong?
if it's of any significance, this is the page i'm trying to work on.
It works fine. Text. Text. Text. Text. Text. Text. Text. Text. Text.Text.
What you should really be doing is this.
nope, does not work at all. i copied exactly what you wrote and you can see it at the top of this page (i even turned off the hover opacity effect in case that was affecting it) but there's still no hover text.
Subeta is removing the title attribute.
Check the source code and you'll just see Text.
You can still do it with CSS though <style>
.ttip {
position: relative;
display: inline-block;
font-style: italic; /* only for visual differentiation */
}
.ttiptext { background-color: rgba(0,0,0,.5); /* change however you like / color: ; / change however you like / text-align: center; border-radius: 6px; padding: 4px 3px; position: absolute; z-index: 1; bottom: 150%; left: 50%; margin-left: -60px; font-style: normal; / to undo style on .ttip */ width:120px; z-index:3; visibility:hidden; }
.ttip:hover .ttiptext { visibility: visible; } </style>
CSS ABOVE | HTML BELOW
Text text, TextText text text text. Text text.
Text text text. Text text text text text.