Tooltip & Popover

Tooltips (hover/focus), popovers (click or hover) and dropdown menus, positioned with the core computePosition helper.

Tooltip

Tooltip

Vue

<div class="thl-demo-row">
  <ThlTooltip v-for="p in ['top','right','bottom','left']" :key="p" :content="`Tooltip on ${p}`" :placement="p"><ThlButton>{{ p }}</ThlButton></ThlTooltip>
  <ThlTooltip content="danger" color="danger"><ThlButton variant="danger">colored</ThlButton></ThlTooltip>
</div>

React

<Tooltip content="Tooltip on top" placement="top"><Button>top</Button></Tooltip>
<Tooltip content="danger" color="danger"><Button variant="danger">colored</Button></Tooltip>

Angular

<thl-tooltip content="Tooltip on top" placement="top"><button thl-button>top</button></thl-tooltip>
<thl-tooltip content="danger" color="danger"><button thl-button variant="danger">colored</button></thl-tooltip>

Popover & Dropdown

Popover & Dropdown

Vue

<div class="thl-demo-row">
  <ThlPopover title="Popover title" content="And here's some amazing content."><ThlButton variant="info">Click</ThlButton></ThlPopover>
  <ThlPopover title="Hover" content="Hover trigger" trigger="hover" color="purple"><ThlButton variant="purple">Hover</ThlButton></ThlPopover>
  <ThlDropdown :items="items" @select="(k) => toast.info(k)"><template #trigger><ThlButton variant="primary" icon-right="chevron-down">Actions</ThlButton></template></ThlDropdown>
</div>

React

<Popover title="Popover title" content="And here's some amazing content."><Button variant="info">Click</Button></Popover>
<Dropdown items={items} onSelect={(k) => toast.info(k)}
  trigger={<Button variant="primary" iconRight="chevron-down">Actions</Button>} />

Angular

<thl-popover title="Popover title" content="And here's some amazing content."><button thl-button variant="info">Click</button></thl-popover>
<thl-dropdown [items]="items" (selected)="toast.info($event)">
  <button thlDropdownTrigger thl-button variant="primary" iconRight="chevron-down">Actions</button>
</thl-dropdown>

API

Tooltip

<ThlTooltip> · import { ThlTooltip } from '@thl-ui/vue'

Prop	Type	Default
content	string	—
placement	string	"top"
color	string	—
delay	number	—

Slots: defaultcontent

Popover

<ThlPopover> · import { ThlPopover } from '@thl-ui/vue'

Prop	Type	Default
title	string	—
content	string	—
placement	string	"bottom"
color	string	—
trigger	string	"click"

Slots: defaultcontent

Dropdown

<ThlDropdown> · import { ThlDropdown } from '@thl-ui/vue'

Prop	Type	Default
items	any	—
align	string	"start"
placement	string	"bottom"
menuClass	string	—
animation	string	—

Events: select

Slots: triggerdefault