TheBestTutorials.css Tooltips
Tooltips display text (or other content) when you hover over an HTML element.
Inline Tooltip Text
Hover over the sentence below!
London 9 million is the capital city of England.
The TheBestTutorials-tooltip class defines the HTML element to hover over (tooltip container).
The TheBestTutorials-text class defines the tooltip text:
Example
<span class="subhodaya-text">9 million</span>
is the capital city of England</p>
Inline Tooltip Tag
Hover over the sentence below!
London 9 million is the capital city of England.
Example
<span class="subhodaya-text subhodaya-tag">9 million</span>
is the capital city of England</p>
Image Tooltip
Hover over this picture to see the effect:
A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars typically have four wheels.(Wikipedia)
The TheBestTutorials-tooltip class defines the HTML element to hover over (tooltip container).
The TheBestTutorials-text class defines the tooltip text:
Example (text before the picture)
<p class="subhodaya-text">A car is a...</p>
<img src="img_car.jpg" alt="Car">
</div>
Example (text after the picture)
<img src="img_car.jpg" alt="Car">
<p class="subhodaya-text">A car is a...</p>
</div>
Absolute Tooltip
If you want the tooltip to appear in an absolute position, position the tooltip text (TheBestTutorials-text) with CSS:
Example
<span style="position:absolute;left:0;bottom:18px"
class="subhodaya-text subhodaya-tag">9 million</span></p>
Colored Tooltip
If you want a colored tooltip, use the TheBestTutorials-color classes:
Rounded Tooltip
If you want a rounded tooltip, use the TheBestTutorials-round classes:
Example
Small Tooltip
If you want a small tooltip, use the TheBestTutorials-small class:
Example
Tiny Tooltip
If you want a tiny tooltip, use the TheBestTutorials-tiny class:
Example
Large Tooltip
If you want a large tooltip, use the TheBestTutorials-large classes:
Example
Animated Tooltip
If you want to fade in the tooltip, use the TheBestTutorials-animate-opacity class:
