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: '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 ]
})
Content

Tooltip: auto

When you use tooltip: 'auto', Verticator will check titles of each slide in the order: data-verticator-tooltip, data-name, title, and if none found, headings inside each slide in the order: h1, h2, h3, h4. For this slide it will use the first attribute in the list that it can find: data-name.

Reveal.initialize({
	...
	verticator: {
		tooltip: 'auto',
	},
	plugins: [ Verticator ]
})
Content

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: 'auto',
	},
	plugins: [ Verticator ]
})

Use slide heading for the tooltip

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 ]
})
Content