@carbon/charts
Version:
Carbon charting components
67 lines (63 loc) • 4.43 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-dpj84x678bm-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-labelledby="example-dpj84x678bm-label" data-tooltip-trigger data-tooltip-target="#example-dpj84x678bm"
role="button" class="bx--tooltip__trigger" aria-controls="example-dpj84x678bm" 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-dpj84x678bm" data-floating-menu-direction="bottom" class="bx--tooltip"
data-avoid-focus-on-open role="dialog" aria-describedby="example-dpj84x678bm-body" aria-labelledby="example-dpj84x678bm-label">
<span class="bx--tooltip__caret"></span>
<p id="example-dpj84x678bm-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-eowjleqeeb-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-labelledby="example-eowjleqeeb-label" data-tooltip-trigger data-tooltip-target="#example-eowjleqeeb"
role="button" class="bx--tooltip__trigger" aria-controls="example-eowjleqeeb" 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-eowjleqeeb" data-floating-menu-direction="bottom" class="bx--tooltip"
data-avoid-focus-on-open role="dialog" aria-describedby="example-eowjleqeeb-body" aria-labelledby="example-eowjleqeeb-heading">
<span class="bx--tooltip__caret"></span>
<h4 id="example-eowjleqeeb-heading">Heading within a Tooltip</h4>
<p id="example-eowjleqeeb-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-w1qgpr6yxyr-label" class="bx--tooltip__label">
Tooltip label
<div tabindex="0" aria-labelledby="example-w1qgpr6yxyr-label" data-tooltip-trigger data-tooltip-target="#example-w1qgpr6yxyr"
role="button" class="bx--tooltip__trigger" aria-controls="example-w1qgpr6yxyr" 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-w1qgpr6yxyr" data-floating-menu-direction="bottom" class="bx--tooltip"
data-avoid-focus-on-open role="dialog" aria-describedby="example-w1qgpr6yxyr-body" aria-label="Tooltip label">
<span class="bx--tooltip__caret"></span>
<p id="example-w1qgpr6yxyr-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>