Tooltip

The short-form tutorial below represents how to pair Rails UI, Stimulus.js, and Tippy.js together.

1. Initializing the Stimulus.js controller

Leverage the Railsui Tooltip Stimulus controller from railsui-stimulus for drop-in tooltips.

// Import components adhoc.
import { RailsuiTooltip } from 'railsui-stimulus'
application.register('railsui-tooltip', RailsuiTooltip)

2. Initialize the controller in your views

Add the data attribute data-controller='railsui-tooltip' to an HTML element.

<button data-controller="railsui-tooltip" class="btn btn-primary">Tooltip demo</button>

3. Pass content to the tooltip

Add the data attribute data-tooltip-content-value='Your content here' to an HTML element. Inside the data attribute you may pass as much copy as you like.

<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the content inside my tooltip!" class="btn btn-primary">Tooltip demo</button>

(optional) 4. Allow HTML in content

Add the data attribute data-tooltip-allow-html-value="true" to an HTML element. Inside the data attribute pass true to enable the option allowHTML for the tippy.js library.

<button data-controller="railsui-tooltip" data-railsui-tooltip-content-value="This is the <strong>bold</strong> and <u>underlined</u> content inside my tooltip!" data-railsui-tooltip-allow-html-value="true" class="btn btn-primary">Tooltip with HTML demo</button>