Tooltip

Fully featured Tooltip component using CSS only, no JS at all

Example

Hover me!
Hover me! [top-left]
Hover me! [light]
Hover me! [bottom-right]
Hover me! [Long multiline text]

Code

<span cssonly-tooltip="Nice cssonly tooltip">Hover me!</span>

Options

Class names

  // the default alignment is top center
  cssonly-tooltip-top-left // top left
  cssonly-tooltip-top-right // top right
  cssonly-tooltip-bottom // bottom center
  cssonly-tooltip-bottom-right // bottom right
  cssonly-tooltip-bottom-left // bottom left
  cssonly-tooltip-light // light appearance
  cssonly-tooltip-multiline // long multiline text

Edit this page on GitHub
Table of Contents