Play UI

Commonly used to display prompt information when the mouse hovers.

Usage

title | content

Set tooltip title content.

<template>
  <div class="flex gap-2">
    <PlTooltip
      content="This is tooltip content!"
    >
      <template #reference>
        <PlButton>
          tooltip
        </PlButton>
      </template>
    </PlTooltip>
  </div>
</template>

<script setup lang="ts">

</script>

<template>
  <div class="flex gap-2">
    <PlTooltip
      content="This is tooltip content!"
    >
      <template #reference>
        <PlButton>
          tooltip
        </PlButton>
      </template>
    </PlTooltip>
  </div>
</template>

<script setup lang="ts">

</script>

trigger

Set tooltip trigger methods.

<template>
  <div class="flex gap-2">
    <PlTooltip
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          hover
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      trigger="click"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          click
        </PlButton>
      </template>
    </PlTooltip>
  </div>
</template>

<script setup lang="ts">

</script>

<template>
  <div class="flex gap-2">
    <PlTooltip
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          hover
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      trigger="click"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          click
        </PlButton>
      </template>
    </PlTooltip>
  </div>
</template>

<script setup lang="ts">

</script>

placement

Set tooltip placement.

<template>
  <div class="w-full flex gap-2">
    <PlTooltip
      placement="left"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          left
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      placement="top"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          top
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      placement="right"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          right
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      placement="bottom"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          bottom
        </PlButton>
      </template>
    </PlTooltip>
  </div>
</template>

<script setup lang="ts">

</script>

<template>
  <div class="w-full flex gap-2">
    <PlTooltip
      placement="left"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          left
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      placement="top"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          top
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      placement="right"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          right
        </PlButton>
      </template>
    </PlTooltip>
    <PlTooltip
      placement="bottom"
      content="This is tootip content!"
    >
      <template #reference>
        <PlButton>
          bottom
        </PlButton>
      </template>
    </PlTooltip>
  </div>
</template>

<script setup lang="ts">

</script>

headless

Custom tooltip.

<template>
  <PlTooltip
    content="This is tooltip content!"
  >
    <template #reference>
      <PlButton>
        tooltip
      </PlButton>
    </template>
    <template #headless>
      <div class="text-white bg-red">
        This is custom tooltip!
      </div>
    </template>
  </PlTooltip>
</template>

<script setup lang="ts">

</script>

<template>
  <PlTooltip
    content="This is tooltip content!"
  >
    <template #reference>
      <PlButton>
        tooltip
      </PlButton>
    </template>
    <template #headless>
      <div class="text-white bg-red">
        This is custom tooltip!
      </div>
    </template>
  </PlTooltip>
</template>

<script setup lang="ts">

</script>

Props

Name	Type	Default	Description
title	`string`	`''`	set tooltip title.
content	`string`	`''`	set tooltip content.
placement	`<'top' \| 'right' \| 'bottom' \| 'left' \| 'top-start' \| 'top-end' \| 'right-start' \| 'right-end' \| 'bottom-start' \| 'bottom-end' \| 'left-start' \| 'left-end'>[]`	`'right'`	set tooltip placement.
trigger	`hover' \| 'click'`	`'hover'`	set tooltip trigger methods.

Slots

Name	Parameters	Description
headless	`()`	Custom Popover.

Tooltip New ​

Usage ​

title | content ​

trigger ​

placement ​

headless ​

Props ​

Slots ​

Tooltip ^New

Usage

title | content

trigger

placement

headless

Props

Slots