ux-tooltip

ux-tooltip Documentation

This component calls a 'tooltip' decorator so that it can be shown in documentation page.

In practice, you should call the decorator directly.

Read Foundation's tooltip docs for more details.

Example of use

As Decorator

Example with a tooltip

As Component

Example with a tooltip

Use Cases Manifest
Use case: Data driven use case
    {{#events.uxTooltip_89}}
  • {{this}}
  • {{/}}

	{
     "tagElement": "",
     "className": "tooltip",
     "selectorName": "tooltip_demo",
     "content": "This is a tooltip content.",
     "delay": "0",
     "show_on": "small medium large xlarge xxlarge",
     "text": "I'm a tooltip!"
 }

Semantic Data Model
tagElement - [span a] the tag element for the tooltip (Default: span)
className - class name of the tooltip (Default 'tooltip')
selectorName - the value of the tooltip id
content - the content inside the tooltip
delay - the delay between hover/focus and tooltip shown, in ms (Default: 0)
show_on - [small medium large xlarge xxlarge] To allow tooltip to be visible on a particular sreen size