Tooltip

A tooltip that popup when the mouse hovers, focus, or click on a component.

Basic usage

When the mouse is moved in, the tooltip appears, and when the mouse is moved out, the tooltip disappears.

Custom Background Color

Customize the background color through the background-color property.

Position

The tooltip supports 12 different orientations. They are: upper left, upper, upper right, lower left, down, lower right, upper left, left, lower left, upper right, right, lower right.

<template>
  <div :style="{ position: 'relative', width: '440px', height: '280px' }">
    <tu-tooltip content="This is tooltip content." position="tl">
      <tu-button style="position: absolute; top: 0; left: 90px"> tl </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="top">
      <tu-button style="position: absolute; top: 0; left: 180px">
        top
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="tr">
      <tu-button style="position: absolute; top: 0; left: 280px">
        tr
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="bl">
      <tu-button style="position: absolute; top: 240px; left: 80px">
        bl
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="bottom">
      <tu-button style="position: absolute; top: 240px; left: 180px">
        bottom
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="br">
      <tu-button style="position: absolute; top: 240px; left: 280px">
        br
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="lt">
      <tu-button style="position: absolute; top: 60px; left: 10px">
        lt
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="left">
      <tu-button style="position: absolute; top: 120px; left: 10px">
        left
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="lb">
      <tu-button style="position: absolute; top: 180px; left: 10px">
        lb
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="rt">
      <tu-button style="position: absolute; top: 60px; left: 350px">
        rt
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="right">
      <tu-button style="position: absolute; top: 120px; left: 350px">
        right
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="rb">
      <tu-button style="position: absolute; top: 180px; left: 350px">
        rb
      </tu-button>
    </tu-tooltip>
  </div>
</template>

<style scoped lang="scss">
.tu-button {
  width: 80px;
}
</style>

<template>
  <div :style="{ position: 'relative', width: '440px', height: '280px' }">
    <tu-tooltip content="This is tooltip content." position="tl">
      <tu-button style="position: absolute; top: 0; left: 90px"> tl </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="top">
      <tu-button style="position: absolute; top: 0; left: 180px">
        top
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="tr">
      <tu-button style="position: absolute; top: 0; left: 280px">
        tr
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="bl">
      <tu-button style="position: absolute; top: 240px; left: 80px">
        bl
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="bottom">
      <tu-button style="position: absolute; top: 240px; left: 180px">
        bottom
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="br">
      <tu-button style="position: absolute; top: 240px; left: 280px">
        br
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="lt">
      <tu-button style="position: absolute; top: 60px; left: 10px">
        lt
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="left">
      <tu-button style="position: absolute; top: 120px; left: 10px">
        left
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="lb">
      <tu-button style="position: absolute; top: 180px; left: 10px">
        lb
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="rt">
      <tu-button style="position: absolute; top: 60px; left: 350px">
        rt
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="right">
      <tu-button style="position: absolute; top: 120px; left: 350px">
        right
      </tu-button>
    </tu-tooltip>
    <tu-tooltip content="This is tooltip content." position="rb">
      <tu-button style="position: absolute; top: 180px; left: 350px">
        rb
      </tu-button>
    </tu-tooltip>
  </div>
</template>

<style scoped lang="scss">
.tu-button {
  width: 80px;
}
</style>

Sizes

Besides default size, tu-tooltip component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

Name	Description	Type	Default
v-model	Whether the tooltip is visible	`Boolean`	-
default-popup-visible	Whether the tooltip is visible by default (uncontrolled mode)	`Boolean`	false
content	Tooltip content	`String`	-
position	Popup position	`String`	top
size	Popup size	`String`	medium
background-color	Background color of Popover	`String`	-
content-class	The class name of the popup content	`ClassName`	-
content-style	The style of the popup content	`CSSProperties`	-
arrow-class	The class name of the popup arrow	`ClassName`	-
arrow-style	The style of the popup arrow	`CSSProperties`	-
popup-container	Mount container for popup	`String` `HTMLElement` `null` `undefined`	-

Name	Description	Type
popup-visible-change	Emitted when the tooltip display status changes	`Function`

Name	Description	Type
content	Content	-

Basic usage

Custom Background Color

Position

Sizes

Tooltip API

Tooltip Attributes

Tooltip Events

Tooltip Slots

Tooltip ​

Basic usage ​

Custom Background Color ​

Position ​

Sizes ​

Tooltip API ​

Tooltip Attributes ​

Tooltip Events ​

Tooltip Slots ​

Tooltip

Basic usage

Custom Background Color

Position

Sizes

Tooltip API

Tooltip Attributes

Tooltip Events

Tooltip Slots