WtTooltip

Tooltip implementation is based on Floating UI

Props

Prop	Type	Default	Code	Description
placement	String	auto	<wt-tooltip placement="left"></wt-tooltip>	see Floating UI docs, + "auto" for autoPlacement
popper-class	String		<wt-tooltip popper-class="my-class"></wt-tooltip>	add special class to a floating part of tooltip
triggers	Array	['hover', 'focus', 'touch']	<wt-tooltip :triggers="['click']"></wt-tooltip>	see Floating Vue docs
popper-triggers	Array		<wt-tooltip :popper-triggers="['hover']"></wt-tooltip>	see Floating Vue docs
visible	Boolean	false	<wt-tooltip visible></wt-tooltip>	Make tooltip visible
disabled	Boolean	false	<wt-tooltip disabled></wt-tooltip>

Slots

Name	Scope	Description
default		Default content slot

Example Tooltip

Hover me!

Code

<script setup></script>

<template>
  <wt-tooltip>
    <template #activator>
      <div style="padding: 10px; border: 1px solid red">Hover me!</div>
    </template>
    Hello there!
  </wt-tooltip>
</template>

<style scoped lang="scss"></style>

Docs PrimeVue Tooltip

PrimevueTooltip

Example PrimeVue Tooltip

Hover me!

Code

<script setup>
</script>

<template>
  <div class="flex justify-start">
    <div v-tooltip.right="'Example text tooltip'" style="padding: 10px; border: 1px solid red">Hover
      me!
    </div>
  </div>
</template>

<style scoped lang="scss"></style>