Tooltip

A simple tooltip component that appears when a user hovers over an element.

Basic Example

This is a basic tooltip.
<div class="tooltip-wrapper" data-position="bottom">
    <button class="btn">Hover Me</button>
    <div class="tooltip">This is a basic tooltip.</div>
</div>

Positioned Tooltips

Top
Right
Bottom
Left
<div class="tooltip-wrapper" data-position="top">...</div>

Interactive Tooltip

You can click this link.
<div class="tooltip-wrapper">
    <button class="btn">Interactive</button>
    <div class="tooltip">...</div>
</div>

Delayed Tooltip

Appears after 0.5s
<div class="tooltip-wrapper">
    <button class="btn">Delayed</button>
    <div class="tooltip delayed">...</div>
</div>

Custom HTML

Rich Content
Styled text. 
<div class="tooltip-wrapper">
    <button class="btn">HTML Tooltip</button>
    <div class="tooltip">...</div>
</div>

Disabled Elements

This button is disabled!
<div class="tooltip-wrapper">
    <button class="btn" disabled>...</button>
    <div class="tooltip">...</div>
</div>

Fade Animation Tooltip

Tooltip text 
<div class="fade-tooltip-demo">
    <button class="btn">Hover me</button>
    <span class="fade-tooltip-text">Tooltip text</span>
</div>

Conclusion

Tooltips are a great way to provide additional information without cluttering the UI. Use them wisely to enhance user experience.