Popover

Popovers provide additional information on elements where a simple tooltip is not sufficient.

Basic Usage

Click the trigger button to toggle a popover with title and content. Default placement is top.

<TPopover title="Popover title" content="Here's some amazing content. It's very engaging.">
  <button class="btn">Click to toggle</button>
</TPopover>

Four Directions

Four placement options: top (default), right, bottom, and left.

Show Code

<TPopover placement="left" title="Left" content="Left popover">
  <button class="btn">Left</button>
</TPopover>
<TPopover placement="top" title="Top" content="Top popover">
  <button class="btn">Top</button>
</TPopover>
<TPopover placement="bottom" title="Bottom" content="Bottom popover">
  <button class="btn">Bottom</button>
</TPopover>
<TPopover placement="right" title="Right" content="Right popover">
  <button class="btn">Right</button>
</TPopover>

Hover Trigger

Set trigger="hover" to show the popover on mouse hover.

<TPopover trigger="hover" title="Hover trigger" content="Hover over me to see the popover.">
  <button class="btn btn-primary">Hover me</button>
</TPopover>

v-model Control

Use v-model to control the popover visibility programmatically.

Show Code

<script setup>
  import {ref} from 'vue'
  const showPopover = ref(false)
</script>

<template>
  <TPopover v-model="showPopover" title="Controlled" content="Controlled via v-model.">
    <button class="btn btn-outline-primary">Toggle</button>
  </TPopover>
</template>

Custom Content

Use the #title and #content slots to customize popover content with icons or HTML.

Show Code

<script setup>
  import {IconInfoCircle} from '@tabler/icons-vue'
</script>

<template>
  <TPopover placement="bottom">
    <template #title>
      <span class="d-flex align-items-center gap-1">
        <IconInfoCircle size="16" />
        Info
      </span>
    </template>
    <template #content>
      <p class="mb-0">Custom content with HTML support.</p>
    </template>
    <button class="btn btn-info">Custom</button>
  </TPopover>
</template>

Disabled State

Set the disabled prop to disable the popover interaction.

<TPopover disabled title="Disabled" content="This popover is disabled.">
  <button class="btn btn-secondary">Disabled</button>
</TPopover>

API

Props

Prop	Type	Default	Description
modelValue	boolean	false	v-model binding to control visibility
placement	'top' | 'right' | 'bottom' | 'left'	'top'	Popover placement direction
title	string	—	Title text (use #title slot for custom content)
content	string	—	Body content text (use #content slot for custom content)
trigger	'click' | 'hover'	'click'	Trigger method
disabled	boolean	false	Whether to disable the popover
teleportTo	string	'body'	Teleport target selector

Slots

Slot	Description
default	Trigger element (button, link, etc.)
title	Custom title content
content	Custom body content

Emits

Event	Payload	Description
update:modelValue	(value: boolean)	v-model update event
open	—	Emitted when popover opens
close	—	Emitted when popover closes