carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
60 lines (56 loc) • 4.28 kB
HTML
<!--
Copyright IBM Corp. 2016, 2018
This source code is licensed under the Apache-2.0 license found in the
LICENSE file in the root directory of this source tree.
-->
<div id="example-tq3ydiohcnf-label" class="bx--tooltip__label">
Tooltip label
<button aria-expanded="false" aria-labelledby="example-tq3ydiohcnf-label" data-tooltip-trigger data-tooltip-target="#example-tq3ydiohcnf"
class="bx--tooltip__trigger" aria-controls="example-tq3ydiohcnf" aria-haspopup="true">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
</button>
</div>
<div id="example-tq3ydiohcnf" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip"
role="dialog" aria-describedby="example-tq3ydiohcnf-body" aria-labelledby="example-tq3ydiohcnf-label">
<span class="bx--tooltip__caret"></span>
<p id="example-tq3ydiohcnf-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
needed please use a modal instead.</p>
<div class="bx--tooltip__footer">
<a href="#" class="bx--link">Learn More</a>
<button class="bx--btn bx--btn--primary bx--btn--sm"
type="button">Create</button>
</div>
</div>
<div id="example-l3909s7937r-label" class="bx--tooltip__label">
Tooltip label
<button aria-expanded="false" aria-labelledby="example-l3909s7937r-label" data-tooltip-trigger data-tooltip-target="#example-l3909s7937r"
class="bx--tooltip__trigger" aria-controls="example-l3909s7937r" aria-haspopup="true">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
</button>
</div>
<div id="example-l3909s7937r" tabindex="0" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip"
role="dialog" aria-describedby="example-l3909s7937r-body" aria-labelledby="example-l3909s7937r-heading">
<span class="bx--tooltip__caret"></span>
<h4 id="example-l3909s7937r-heading" class="bx--tooltip__heading">Heading within a Tooltip</h4>
<p id="example-l3909s7937r-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
needed please use a modal instead.</p>
</div>
<div id="example-zgexiio3kw-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-expanded="false" aria-labelledby="example-zgexiio3kw-label" data-tooltip-trigger data-tooltip-target="#example-zgexiio3kw"
role="button" class="bx--tooltip__trigger" aria-controls="example-zgexiio3kw" aria-haspopup="true">
<svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8.5 11V6.5h-2v1h1V11H6v1h4v-1zM8 3.5c-.4 0-.8.3-.8.8s.4.7.8.7.8-.3.8-.8-.4-.7-.8-.7z"></path><path d="M8 15c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7zM8 2C4.7 2 2 4.7 2 8s2.7 6 6 6 6-2.7 6-6-2.7-6-6-6z"></path></svg>
</div>
</div>
<div id="example-zgexiio3kw" aria-hidden="true" data-floating-menu-direction="bottom" class="bx--tooltip"
role="dialog" aria-describedby="example-zgexiio3kw-body" aria-label="Tooltip label">
<span class="bx--tooltip__caret"></span>
<p id="example-zgexiio3kw-body" >This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is
needed
please use a modal instead.</p>
<div class="bx--tooltip__footer">
<a href="#" class="bx--link">Learn More</a>
<button class="bx--btn bx--btn--primary bx--btn--sm"
type="button">Create</button>
</div>
</div>