Pear

PTooltip

PTooltip adds Pico tooltip attributes around whatever you pass in. Several Pear controls also accept tooltip props directly.

Wrapper
Shown above by defaultHover linkShown on the right
vue
<p-tooltip content="Shown above by default">
  <button type="button">Hover me</button>
</p-tooltip>

<p-tooltip content="Shown on the right" placement="right">
  <a href="#" @click.prevent>Hover link</a>
</p-tooltip>
Text

Tooltips also work on inline text Pico adds the dotted underline for us. when a short aside would help.

vue
<p>
  Tooltips also work on
  <p-tooltip content="Pico adds the dotted underline for us.">
    inline text
  </p-tooltip>
  when a short aside would help.
</p>
Component Props
Save changes
Find this in account settings
72% complete
vue
<p-button tooltip="Save changes" tooltip-placement="bottom">
  Save
</p-button>

<p-field label="Token">
  <p-input tooltip="Find this in account settings" tooltip-placement="right" />
</p-field>

<p-progress :value="72" tooltip="72% complete" />
API

PTooltip Props

NameTypeDefaultDescription
contentstring-Tooltip content for PTooltip.
placement'top' | 'right' | 'bottom' | 'left'-Optional Pico tooltip placement.
asstring'span'Rendered wrapper element.

Shared Tooltip Props

NameTypeDefaultDescription
tooltipstring-Tooltip content on Pear components that accept tooltip props.
tooltipPlacement'top' | 'right' | 'bottom' | 'left'-Tooltip placement on Pear components that accept tooltip props.

Slots

NameTypeDefaultDescription
defaultslot-Element or component that receives Pico tooltip attributes.