carbon-components
Version:
The Carbon Design System is IBM’s open-source design system for products and experiences.
36 lines (34 loc) • 1.53 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 class="bx--tooltip--definition bx--tooltip--a11y" data-tooltip-definition>
<button aria-describedby="example-start"
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start">
Definition Tooltip (start aligned)
</button>
<div class="bx--assistive-text" id="example-start" role="tooltip">Brief description of the dotted,
underlined word
above.</div>
</div>
<br>
<div class="bx--tooltip--definition bx--tooltip--a11y" data-tooltip-definition>
<button aria-describedby="example-center"
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-center">
Definition Tooltip (center aligned)
</button>
<div class="bx--assistive-text" id="example-center" role="tooltip">Brief description of the dotted,
underlined word
above.</div>
</div>
<br>
<div class="bx--tooltip--definition bx--tooltip--a11y" data-tooltip-definition>
<button aria-describedby="example-end"
class="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-end">
Definition Tooltip (end aligned)
</button>
<div class="bx--assistive-text" id="example-end" role="tooltip">Brief description of the dotted,
underlined word
above.</div>
</div>