<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>

There are no notes for this item.

<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="{{tooltip.classes}}" 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="{{tooltip.classes}}" 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="{{tooltip.classes}}" 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="{{tooltip.classes}}" title="Left">Show on left</button>
  </div>
</div>
package:
  name: uswds
  version: 2.9.0
uswds:
  path: ../../dist
tooltip:
  classes: 'width-full tablet:width-auto'