<div class="grid-row padding-8">
    <div class="tablet:grid-col-3 margin-top-2 text-center">
        <button type="button" class="usa-button usa-tooltip" data-position="top" data-classes="width-full tablet:width-auto" title="Top">Show on top</button>
    </div>
    <div class="tablet:grid-col-3 margin-top-2 text-center">
        <button type="button" class="usa-button usa-tooltip" data-position="bottom" data-classes="width-full tablet:width-auto" title="Bottom">Show on bottom</button>
    </div>
    <div class="tablet:grid-col-3 margin-top-2 text-center">
        <button type="button" class="usa-button usa-tooltip" data-position="right" data-classes="width-full tablet:width-auto" title="Right">Show on right</button>
    </div>
    <div class="tablet:grid-col-3 margin-top-2 text-center">
        <button type="button" class="usa-button usa-tooltip" data-position="left" data-classes="width-full tablet:width-auto" title="Left">Show on left</button>
    </div>
</div>

No notes defined.

package:
  name: metro-digital-design-system-demo
  version: 0.1.0
uswds:
  path: ../../../dist
placeholderLink: javascript:void()
tooltip:
  classes: width-full tablet:width-auto