Verticator

for Reveal.js

Tooltip demo

(Demo not for mobile devices)

Setup

To get tooltips next to the Verticator bullets, set the option 'tooltip' to either of these values:

  • tooltip: 'data-name' or any other attribute.
  • tooltip: true or tooltip: 'auto'

Tooltip: section attribute

When you use tooltip: 'data-name' or tooltip: 'title' or any other attribute with a string value, the tooltip will show that value.

Reveal.initialize({
    ...
    verticator: {
        tooltip: 'data-name',
    },
    plugins: [ Verticator ]
})
<section data-name="Tooltip: section attribute">Content</section>

Tooltip: auto

When you use tooltip: true (or tooltip: 'auto'), Verticator will check attributes of each slide in this order: data-verticator-tooltip, data-name, title, and if none found, headings inside each slide in the order: h1, h2, h3, h4. This slide uses the first attribute found in the list: data-name.

Reveal.initialize({
    ...
    verticator: {
      tooltip: true // or 'auto',
    },
    plugins: [ Verticator ]
})
<section title="Not this" data-name="Tooltip: auto mode">Content</section>

Use slide heading for the tooltip

This section has no attribute set, and because the auto-mode is set, will return the first heading it can find for the text inside the tooltip.

Reveal.initialize({
    ...
    verticator: {
        tooltip: true // or 'auto',
    },
    plugins: [ Verticator ]
})
<section>
    <h3>Use slide heading for the tooltip</h3>
</section>

Auto-mode is convenient for Verticator tooltips in Markdown slides.

No tooltip at all

To avoid showing the tooltip, set data-verticator-tooltip="none". This will turn off the tooltip for only that section.

Reveal.initialize({
    ...
    verticator: {
        tooltip: 'auto',
    },
    plugins: [ Verticator ]
})
<section data-verticator-tooltip="none" data-name="Not this">Content</section>