Tooltip Optional
A simple tooltip – additional text to show when focusing on an element.
This component is just for displaying simple text. If you need Html or more content, consider using the dialog component instead.
Features
- CSS only.
- Can be applied to any Html element. *
- Tooltip is visible on focus and hover. Works with keyboard, mouse and touch.
- Implement by setting the
data-tooltipattribute of the Html element. - Apply options by setting the
data-tooltip-optionsattribute. Multiple options can be used, separated by spaces. - Set
tabindex="0"on elements that aren't focusable.
* Works best with an inline wrapping element, such as <span>, <label>, <abbr> or <dfn>.
Configuration
- Sass file: components/_tooltip.scss
- Include the compiled css file in the Html:
<link href="/css/components/tooltip.min.css" rel="stylesheet" />
Examples
View source for Html code.
Position
Center: test
Right: test
Left: test
Right for small screens only: test
Left for small screens only: test
Text align
For multi-line text.
Center: test
Right: test
Left: test
Wrapping
Line break: test
Wrap long strings: test
Wrap long strings (no spaces): test
Elements
Heading: test
Paragraph definition: test
Paragraph abbreviation: test
Icon:
Badge with label:
Tag: favorite
Tag with icon: favorite