Versatile CSS Tooltip Library – Simple Hint

Category: Tooltip | June 30, 2023
Author:catc
Views Total:49 views
Official Page:Go to website
Last Update:June 30, 2023
License:MIT

Preview:

Versatile CSS Tooltip Library – Simple Hint

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>

You Might Be Interested In:


Leave a Reply