Tooltips
Use a tooltip to add information as needed.
Tooltips require specific markup and element arrtibutes to make them accessible. For more detail check the markup, aria-labelledby and aria-describedby
Hover on the icon and the underlined word in the paragraph of each example to see the tooltip appear.
Examples
Default styling
It's a fez. I wear a fez now.
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
You may be a doctor. But I'm the
Doctor.
It's a fez. I wear a fez now.
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
.tooltip--above
A tooltip that appears above it's sibling.
It's a fez. I wear a fez now.
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
You may be a doctor. But I'm the
Doctor.
It's a fez. I wear a fez now.
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
.tooltip--below
A tooltip that appears below it's sibling.
It's a fez. I wear a fez now.
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
You may be a doctor. But I'm the
Doctor.
It's a fez. I wear a fez now.
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
.tooltip--left
A tooltip that appears to the left of it's sibling.
It's a fez. I wear a fez now.
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
You may be a doctor. But I'm the
Doctor.
It's a fez. I wear a fez now.
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
.tooltip--right
A tooltip that appears to the right of it's sibling.
It's a fez. I wear a fez now.
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
You may be a doctor. But I'm the
Doctor.
It's a fez. I wear a fez now.
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
Markup: components/tooltips/tooltips.html
<div style="padding-left: 2rem; height: 11rem; margin-left: 22rem;">
<span
class="tooltip-container"
aria-labelledby="icon-title-[modifier class]"
aria-describedby="icon-content-[modifier class]"
>
<svg class="icon icon--md tooltip-sibling">
<use xlink:href="#ei-question"></use>
</svg>
<div class="tooltip [modifier class]" role="tooltip">
<span class="tooltip__title" id="icon-title-[modifier class]">
It's a fez. I wear a fez now.
</span>
<div class="tooltip__content" id="icon-content-[modifier class]">
Statistically speaking, if you gave typewriters to a treeful of monkeys,
they'd eventually produce the works of William Shakespeare.
</div>
</div>
</span>
</div>
<div>
You may be a doctor. But I'm the
<span
class="tooltip-container"
aria-labelledby="paragraph-title-[modifier class]"
aria-describedby="paragraph-content-[modifier class]"
>
<span class="tooltip-sibling" style="text-decoration: underline;">Doctor.</span>
<div class="tooltip [modifier class]" role="tooltip">
<span class="tooltip__title" id="paragraph-title-[modifier class]">
It's a fez. I wear a fez now.
</span>
<div class="tooltip__content" id="paragraph-content-[modifier class]">
I hate computers and refuse to be bullied by them.
Are you capable of speaking without flapping your hands about?
</div>
</div>
</span>
selectors the logic takes place within the same parent element.
That's what siblings means... sharing the same parent.
</div>
Source:
components/tooltips/tooltips.scss, line 1