Tooltip

A short floating note on hover or focus. Explains a constraint, not the visible label.

Position

Default is top. Compact API: pass text and wrap the trigger.

TopBottomLeftRight


        
          1
          
          <Tooltip text="Applies to this project only">
        

          2
          
            <span>Top</span>
        

          3
          
          </Tooltip>
        

          4
          
          <Tooltip position="bottom" text="Applies to this project only">
        

          5
          
            <span>Bottom</span>
        

          6
          
          </Tooltip>

No delay

delay is on by default (~150ms). Set delay to false only for dense icon toolbars.

TopBottomLeftRight


        
          1
          
          <Tooltip :delay="false" text="Applies to this project only">
        

          2
          
            <span>Top</span>
        

          3
          
          </Tooltip>

Box align

boxAlign shifts the floating box along the side: left, center (default), right.

Bottom / LeftBottom / CenterBottom / Right


        
          1
          
          <Tooltip position="bottom" box-align="left" text="Applies to this project only">
        

          2
          
            <span>Bottom / Left</span>
        

          3
          
          </Tooltip>

Type

SuccessErrorWarningViolet


        
          1
          
          <Tooltip type="success" text="Build passed">
        

          2
          
            <span>Success</span>
        

          3
          
          </Tooltip>
        

          4
          
          <Tooltip type="error" text="Deploy failed">
        

          5
          
            <span>Error</span>
        

          6
          
          </Tooltip>

Custom text

Use the text slot when the note needs emphasis or a Kbd.

Limit

Shortcut


        
          1
          
          <Tooltip>
        

          2
          
            <span>Shortcut</span>
        

          3
          
            <template #text>
        

          4
          
              Search
        

          5
          
              <Kbd small>/</Kbd>
        

          6
          
            </template>
        

          7
          
          </Tooltip>

Tip and alignment

tip hides the arrow. center={false} left-aligns longer copy.

No arrowLeft-aligned


        
          1
          
          <Tooltip :tip="false" text="Applies to this project only">
        

          2
          
            No arrow
        

          3
          
          </Tooltip>
        

          4
          
          <Tooltip :center="false" text="Retention is 14 days on the Hobby plan.">
        

          5
          
            Left-aligned
        

          6
          
          </Tooltip>

Best practices

Visible label names the control. Tooltip adds the limit, scope, or why it is disabled.
One sentence or fragment. Sentence case. No period on a single fragment.
Do not repeat the button text or say “Click to…”. Entity previews with rows of facts belong on Context Card.
Keep the default delay. Icon-only triggers still need their own aria-label — the tooltip does not replace it.
Do not wrap a labelled Input. Put help on a sibling icon button so the field keeps a single name.