CodeCanyon
CodeCanyon
Code
Code
Code
Code
Code
Code

Tip - Pure CSS Tooltips

Tip - Pure CSS Tooltips

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
by
by
by
by
by
by