Versatile CSS Tooltip Library – Simple Hint

Preview:

Description:

A CSS-only tooltip library for appending customizable, responsive, animated, and themeable tooltips to any element within the document.

It grants full control over tooltip positioning and alignment, enabling you to place tooltips exactly where they make the most sense for your users.

How to use it:

1. Download and import the simple-hint.css stylesheet.

<link rel="stylesheet" href="simple-hint.min.css" />

2. Add the hint-position class to the target element and define the tooltip content in the data-hint attribute. All possible position options:

• hint-top-middle
• hint-top-left
• hint-top-right
• hint-bottom-middle
• hint-bottom-left
• hint-bottom-right
• hint-left-middle
• hint-left-top
• hint-left-bottom
• hint-right-middle
• hint-right-top
• hint-right-bottom

<span data-hint="Tooltip Content" 
      class="hint-top-middle">
      Top-middle hint
</span>

/* recommended */
span { position: relative; }

3. Set the size of the tooltip.

<span data-hint="Tooltip Content" 
      class="hint-top-middle-s-small">
      Top-middle Small
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle-s-med">
      Top-middle Medium
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle-s-big">
      Top-middle Big
</span>

4. Change the theme of the tooltip. Available themes:

• info
• success
• error
• notice

<span data-hint="Tooltip Content" 
      class="hint-top-middle-t-info">
      Top-middle Info
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle-t-success">
      Top-middle Success
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle-t-error">
      Top-middle Error
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle-t-notice">
      Top-middle Notice
</span>

5. Determine whether to disable the tooltip on mobile devices.

<span data-hint="Tooltip Content" 
      class="hint-top-middle-mobile">
      Top-middle Disable On Mobile
</span>

6. Apply a fading or sliding animation to the tooltip.

<span data-hint="Tooltip Content" 
      class="hint-top-middle hint-fade">
      Top-middle Fade
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle hint-anim">
      Top-middle Slide
</span>

7. Apply a delay to the animation.

<span data-hint="Tooltip Content" 
      class="hint-top-middle hint-fade-d-short">
      Top-middle 0.4s delay
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle hint-anim-d-med">
      Top-middle 1s delay
</span>
<span data-hint="Tooltip Content" 
      class="hint-top-middle hint-anim-d-long">
      Top-middle 1.5s delay
</span>

8. Make the tooltip always visible.

<span data-hint="Tooltip Content" 
      class="hint-top-middle hint-persist">
      Top-middle Always Visible
</span>