(Demo not for mobile devices)
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'
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>
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>
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.
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>