<!--
  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.
-->
{{!-- @todo remove duplicate class on next major release when selectors can be cleaned up --}}
<div class="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
  <button aria-describedby="example-start"
    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--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="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
  <button aria-describedby="example-center"
    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--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="{{@root.prefix}}--tooltip--definition {{@root.prefix}}--tooltip--a11y">
  <button aria-describedby="example-end"
    class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip__trigger--definition {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--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>
