Hint.css instructions for use,

Hint.css instructions for use,

Hint.css

Purpose

Quickly implement tooltips prompt styles

Related Resources

Official Website GitHubCDN

Features:

1. You only need to introduce a CSS file without JavaScript
2. Only 1.5KB min and zip files (SCSS and CSS10KB)
3. Easy to use, no configuration required
4. Supports the accessibility attribute of aria-label.
5. Supports all mainstream browsers

Disadvantages:

Fees are charged, and relevant licenses are required for commercial use.

Usage:

1. Introduce in the HEAD label:

<Link rel = "stylesheet" href = "hint.css"> </link>

Or

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

Ii. Example

Hello Sir, <span class = "hint -- bottom" aria-label = "Thank you! "> Hover me. </span>

Iii. Usage

Class binding: (indicating the display position)

Hint -- top hint -- right hint -- bottom hint -- left hint -- top-right hint -- bottom-left hint-bottom-right

 

Prompt content or prompt text: (written as an attribute)

Two Methods: data-hint = "prompt information" Or aria-label = "prompt information"

4. Color-Modifier

Error hint -- error

<Span class = "hint -- top hint -- error" data-hint = "prompt message"> error </span>

 

Warning hint -- warning

<Span class = "hint -- top hint -- warning" data-hint = "prompt message"> warning </span>

 

Hint -- info prompt

<Span class = "hint -- top hint -- info" data-hint = "prompt"> prompt </span>

 

Successful hint -- success

<Span class = "hint -- top hint -- success" data-hint = "prompt message"> success </span>

5. dimension-Modifier

Small hint -- small

<Span class = "hint -- top hint -- small" data-hint = "prompt message"> success </span>

 

Medium Size hint -- medium

<Span class = "hint -- top hint -- medium" data-hint = "prompt message"> success </span>

 

Large hint -- large

<Span class = "hint -- top hint -- large" data-hint = "prompt message"> success </span>

6. Others-Modifier

Hide hint -- always

<Span class = "hint -- top hint -- always" data-hint = "prompt"> always show </span>

 

The prompt box is changed to the rounded corner hint -- rounded.

<Span class = "hint -- top hint -- rounded" data-hint = "prompt message"> rounded corner display </span>

 

Remove the transition animation effect hint -- no-animate

<Span class = "hint -- top hint -- no-animate" data-hint = "prompt message"> no animation </span>

 

Transition to increase elasticity hint -- bounce

<Span class = "hint -- top hint -- bounce" data-hint = ""> auto transition is added to the animation. </span>

Browser compatibility

• Chrome-basic functions + transition
• Firefox-basic functions + transition
• Opera-basic functions
• Safari-basic
• IE 10 +-basic functions + transition
• IE 8 & 9-basic functions