Tip – Pure CSS Tooltips

• No javascript
• 8 positions
• 19 predefined colors
• 5 predefined sizes
• Animated
• Easy to use & customize
• SASS sources
• Gulp
• Documentation

How it works?

• Add “tip” class to element to init tooltip
• Add second class with position of tooltip “tip—top”
• Add aria-label attribute with text of your tooltip, f.e. aria-label=”My Tooltip”
• Add background color of your tooltip with third class “tip—red” (optional)
• done;

Positions examples:

• “tip—top” – tooltip on top at center
• “tip—top-left” – tooltip on top to the left
• “tip—top-right” – tooltip on top to the right
• “tip—left” – tooltip on left
• “tip—right” – tooltip on right
• “tip—bottom” – tooltip on bottom at center
• “tip—bottom-left” – tooltip on bottom to the left
• “tip—bottom-right” – tooltip on bottom to the right

Colors:

• Red Tooltip “tip—red”
• Green Tooltip “tip—green”
• Purple Tooltip tip—purple

All colors: gray, red, pink, purple, deep-purple, indigo, blue, light-blue, cyan, teal, green, light-green, lime, yellow, amber, orange, deep-orange, brown + default black

Styling:

• Tooltip with shadow “tip—shadow”
• Tooltip with rounded corners “tip—rounded”

Sizes:

• Small tooltip “tip—sm”
• Medium tooltip “tip—md”
• Large tooltip “tip—lg”
• Full width tooltip “tip—full”

Browser Support

• IE 10+, IE mobile 10+
• Edge
• Google Chrome
• Mozilla Firefox
• Safari, iOS Safari
• Opera, Opera mini
• Android Browser

codecanyon-19347674-tip-pure-css-tooltips.zip