Components

Tooltip

Show information when hovering over an element.

Usage

Good Job! :D
<template>
  <NXW-Tooltip top>
    <NXW-Button>Hover over me!</NXW-Button>
    <template #tooltip> Good Job! :D</template>
  </NXW-Tooltip>
</template>

Props

bottom

boolean
Default
false

color

object
Default
<template>
  <NXW-Tooltip
    :color="{
      text: 'dark:text-white text-black',
      bg: 'bg-primary-800',
      bgPointer: 'bg-primary-800',
    }"
  />
</template>
Default
false

left

boolean
Default
false
boolean
Default
false

rounded

boolean
|
string
Default
true
Example
rounded-lg

text

string
Default
text-xs text-center

top

boolean
Default
true

transition

boolean
|
object
Default
true
Example
<template>
  <NXW-Tooltip
    :transition="{ duration: 'duration-300', ease: 'ease-in-out' }"
  />
</template>

width

string
Default
w-max

z-index

string
Default
z-10

Slots


Copyright © 2024