<span class="pier-tooltip pier-tooltip--top" data-tooltip="I am a tooltip!"
    ><button class="pier-button-standard -m-a-4">Base Tooltip</button></span
>

<div class="-d-flex">
    <span class="pier-tooltip pier-tooltip--top" data-tooltip="I am a tooltip!"
        ><button class="pier-button-standard -m-a-4">
            Medium Tooltip
        </button></span
    ><span
        class="pier-tooltip pier-tooltip--top pier-tooltip--lg"
        data-tooltip="I am a tooltip!"
        ><button class="pier-button-standard -m-a-4">
            Large Tooltip
        </button></span
    >
</div>

<div class="-d-flex">
    <span class="pier-tooltip pier-tooltip--top" data-tooltip="I am a tooltip!"
        ><button class="pier-button-standard -m-a-4">
            Bottom Tooltip
        </button></span
    ><span
        class="pier-tooltip pier-tooltip--bottom"
        data-tooltip="I am a tooltip!"
        ><button class="pier-button-standard -m-a-4">
            Bottom Tooltip
        </button></span
    ><span
        class="pier-tooltip pier-tooltip--left"
        data-tooltip="I am a tooltip!"
        ><button class="pier-button-standard -m-a-4">Left Tooltip</button></span
    ><span
        class="pier-tooltip pier-tooltip--right"
        data-tooltip="I am a tooltip!"
        ><button class="pier-button-standard -m-a-4">
            Right Tooltip
        </button></span
    >
</div>

<span
    class="pier-tooltip pier-tooltip--top pier-tooltip--dark"
    data-tooltip="I am a tooltip!"
    ><button class="pier-button-standard -m-a-4">Dark Tooltip</button></span
>