Check with your designers to help you design this section
Check with your designers to help you design this section
Tooltips should be used to help users understand unknown or unfamiliar objects that aren’t described directly in the user interface.
Hover over the bolded text below to see tooltips:
Lorem <strong data-tooltip="Basic Tooltip!">ipsum</strong> dolor sit
amet, consectetur adipiscing
<strong data-tooltip="Basic Tooltip!">elit</strong>, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
<strong data-tooltip="Basic Tooltip!">veniam</strong>, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id <strong data-tooltip="Basic Tooltip!">est</strong> laborum.
Tooltip can have any fixed size or can be set to have the same width as the target.
<button
class="button button-default"
aria-label="100px"
data-tooltip="100px"
data-tooltip-pos="fit"
data-tooltip-size="100"
>
Hover Me!
</button>
<button
class="button button-default"
aria-label="150px"
data-tooltip="150px"
data-tooltip-pos="fit"
data-tooltip-size="150"
>
Hover Me!
</button>
<button
class="button button-default"
aria-label="200px"
data-tooltip="200px"
data-tooltip-pos="fit"
data-tooltip-size="200"
>
Hover Me!
</button>
<button
class="button button-default"
aria-label="250px"
data-tooltip="250px"
data-tooltip-pos="fit"
data-tooltip-size="250"
>
Hover Me!
</button>
<button
class="button button-default"
aria-label="Full Width of Target!"
data-tooltip="Full Width of Target!"
data-tooltip-pos=""
data-tooltip-size="fit"
style="width:260px;"
>
Hover Me!
</button>
<button
class="button button-default"
aria-label="Top-left Tooltip!"
data-tooltip="Top-left Tooltip!"
data-tooltip-pos="top-left"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Top-right Tooltip!"
data-tooltip="Top-right Tooltip!"
data-tooltip-pos="top-right"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Bottom-left Tooltip!"
data-tooltip="Bottom-left Tooltip!"
data-tooltip-pos="bottom-left"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Bottom-right Tooltip!"
data-tooltip="Bottom-right Tooltip!"
data-tooltip-pos="bottom-right"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Left Tooltip!"
data-tooltip="Left Tooltip!"
data-tooltip-pos="left"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Top Tooltip!"
data-tooltip="Top Tooltip!"
data-tooltip-pos="top"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Bottom Tooltip!"
data-tooltip="Bottom Tooltip!"
data-tooltip-pos="down"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Right Tooltip!"
data-tooltip="Right Tooltip!"
data-tooltip-pos="right"
>
Show Me!
</button>
<button
class="button button-default"
aria-label="Left Tooltip!"
data-tooltip="Left Tooltip!"
data-tooltip-pos="left"
data-tooltip-show
>
Always Show!
</button>
<button
class="button button-default"
aria-label="Bottom Tooltip!"
data-tooltip="Bottom Tooltip!"
data-tooltip-pos="down"
data-tooltip-show
>
Always Show!
</button>
<button
class="button button-default"
aria-label="Top Tooltip!"
data-tooltip="Top Tooltip!"
data-tooltip-pos="up"
data-tooltip-show
>
Always Show!
</button>
<button
class="button button-default"
aria-label="Right Tooltip!"
data-tooltip="Right Tooltip!"
data-tooltip-pos="right"
data-tooltip-show
>
Always Show!
</button>
If you need to add a large amount of content the tooltip should have a fixed width to work.
This can be achieved using data-tooltip-size="200"
(200 is the width in px)
or data-tooltip-size="fit"
(fit means that the tooltip will have the same width
as the target).
<button
class="button button-default"
data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper erat
id urna vulputate interdum. Pellentesque non cursus libero. Nam vehicula nisl sem, vitae
ultrices est convallis vitae. Maecenas maximus, odio sit amet congue elementum, sem sapien
porta orci, sit amet cursus nulla ante vitae lacus. Etiam id dolor neque. Vestibulum aliquam
euismod suscipit."
data-tooltip-size="250"
>
Long content!
</button>
<button
class="button button-default"
data-tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin ullamcorper erat
id urna vulputate interdum. Pellentesque non cursus libero. Nam vehicula nisl sem, vitae
ultrices est convallis vitae."
data-tooltip-size="fit"
>
Long content!
</button>