<!--
  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.
-->
<p>start</p>
<br>
{{!-- @todo Had to add a modifier to the parent to correct the animation but in the next major release it could be removed in favor of the new HTML format --}}
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-start"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-start"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-start"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-start"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<br>
<br>
<p>center</p>
<br>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<br>
<br>
<p>end</p>
<br>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--left {{@root.prefix}}--tooltip--align-end"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--top {{@root.prefix}}--tooltip--align-end"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--bottom {{@root.prefix}}--tooltip--align-end"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
<button
  class="{{@root.prefix}}--tooltip__trigger {{@root.prefix}}--tooltip--a11y {{@root.prefix}}--tooltip--right {{@root.prefix}}--tooltip--align-end"
  data-tooltip-icon>
  <span class="{{@root.prefix}}--assistive-text">Filter</span>
  {{ carbon-icon 'Filter16' }}
</button>
