Usage

Some tooltip message

<template>
  <c-tooltip content="Some tooltip message">
    <c-button label="Hover Me" />
  </c-tooltip>
</template>

Click to open/fold code

Open Vue Repl Editor

Positions

top-start

top

top-end

right-start

right

right-end

bottom-start

bottom

bottom-end

left-start

left

left-end

I'm tooltip content from top-start

<script setup>
import { ref } from 'vue'
const pos = ref('top-start')
const positions = [
  'top-start',
  'top',
  'top-end',
  'right-start',
  'right',
  'right-end',
  'bottom-start',
  'bottom',
  'bottom-end',
  'left-start',
  'left',
  'left-end',
].map(p => ({
  label: p,
  value: p
}))
</script>

<template>
  <c-radio-group
    :options="positions"
    v-model="pos"
  />
  <div text-center py-8>
    <c-tooltip :position="pos" :content="`I'm tooltip content from ${pos}`">
      <c-button label="Hover me" />
    </c-tooltip>
  </div>
</template>

Click to open/fold code

Open Vue Repl Editor

Custom Content

I'm a custom content.

<template>
  <c-tooltip
    position="right"
    trigger="click"
  >
    <c-button label="Click Me" />
    <template #popup>
      <div class="custom-content">
        I'm a custom content.
        <c-button
          rounded
          flat
          label="Even with a button"
        />
      </div>
    </template>
  </c-tooltip>
</template>

<style scoped>
.custom-content {
  white-space: nowrap;
  padding: 12px;
}
</style>

Click to open/fold code

Open Vue Repl Editor

Trigger Methods

Hello, world

Hello, world

Click the left button

Hello, world

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

const toggleShow = () => {
  show.value = !show.value
}
</script>

<template>
  <div class="popups">
    <c-tooltip content="Hello, world">
      <c-button
        outlined
        rounded
        label="Hover (default)"
      />
    </c-tooltip>
    <c-tooltip
      trigger="click"
      content="Hello, world"
    >
      <c-button
        rounded
        label="Click"
      />
    </c-tooltip>
    <div>
      <c-button
        label="Manual"
        flat
        @click="toggleShow"
      />
      <c-tooltip
        v-model:show="show"
        trigger="manual"
        content="Hello, world"
        style="margin-left: 12px;"
      >
        Click the left button
      </c-tooltip>
    </div>
  </div>
</template>

<style scoped>
.popups {
  display: flex;
}
div + div {
  margin-left: 12px;
}
</style>

Click to open/fold code

Open Vue Repl Editor

CTooltip API

Props

Slots

Events

content

string | number

Default  ''

The popup content.

position

CTooltipPosition

Default  'top'

The popup position.

trigger

"hover" | "click" | "manual"

Default  'hover'

The trigger method.

show

boolean

Default  false

The show status of tooltip. Can be used with v-model:show. And only working when the trigger is 'manual'