Tooltip

Displays a tooltip when the mouse hovers over or clicks on an element. (If you think this component looks a lot like Popover, congratulations, you're right! Tooltip is a wrapper around Popover 😁).

Basic Usage

The most basic tooltip.

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex flex-col p-x-5 p-y-3 gap-4">
    <div class="flex gap-2 justify-center items-center">
      <ol-tooltip content="Hello, I'm at the top" placement="top-start" trigger="hover">
        <ol-button type="primary">
          Top Start
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm at the top" placement="top" trigger="hover">
        <ol-button type="primary">
          Top
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm at the top" placement="top-end" trigger="hover">
        <ol-button type="primary">
          Top End
        </ol-button>
      </ol-tooltip>
    </div>
    <div class="flex justify-around items-center">
      <ol-tooltip content="Hello, I'm on the left" placement="left-start" trigger="hover">
        <ol-button type="primary">
          Left Start
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm on the right" placement="right-start" trigger="hover">
        <ol-button type="primary">
          Right Start
        </ol-button>
      </ol-tooltip>
    </div>
    <div class="flex justify-around items-center">
      <ol-tooltip content="Hello, I'm on the left" placement="left" trigger="hover">
        <ol-button type="primary">
          Left Center
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm on the right" placement="right" trigger="hover">
        <ol-button type="primary">
          Right Center
        </ol-button>
      </ol-tooltip>
    </div>

    <div class="flex justify-around items-center">
      <ol-tooltip content="Hello, I'm on the left" placement="left-end" trigger="hover">
        <ol-button type="primary">
          Left End
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm on the right" placement="right-end" trigger="hover">
        <ol-button type="primary">
          Right End
        </ol-button>
      </ol-tooltip>
    </div>
    <div class="flex gap-2 justify-center items-center">
      <ol-tooltip content="Hello, I'm at the bottom" placement="bottom-start" trigger="hover">
        <ol-button type="primary">
          Bottom Start
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm at the bottom" placement="bottom" trigger="hover">
        <ol-button type="primary">
          Bottom
        </ol-button>
      </ol-tooltip>
      <ol-tooltip content="Hello, I'm at the bottom" placement="bottom-end" trigger="hover">
        <ol-button type="primary">
          Bottom End
        </ol-button>
      </ol-tooltip>
    </div>
  </div>
</template>

Trigger Methods

The trigger attribute can be used to set different trigger methods.

在 github 中打开

展开代码

复制代码

<template>
  <div class="flex gap-2">
    <ol-tooltip content="hover trigger">
      <ol-button>hover trigger</ol-button>
    </ol-tooltip>
    <ol-tooltip content="click trigger" trigger="click">
      <ol-button>click trigger</ol-button>
    </ol-tooltip>
  </div>
</template>

Tooltip Style

The content-class attribute can be used to set the style of the tooltip.

在 github 中打开

展开代码

复制代码

<template>
  <ol-tooltip content-class="w-sm z-2000" trigger="click" content="To infinity and beyond🚀">
    <ol-button>Click to trigger</ol-button>
  </ol-tooltip>
</template>

Arrow

The arrow attribute can be used to set whether to display the arrow.

在 github 中打开

展开代码

复制代码

<template>
  <ol-tooltip :arrow="false" trigger="click" content="To infinity and beyond🚀">
    <ol-button>No Arrow</ol-button>
  </ol-tooltip>
</template>

Attributes

Attribute Name	Description	Type	Default Value
content-class	Content class name	string	-
content	Content to display	string	-
placement	Position where the tooltip appears	top | bottom | left | right | top	top
trigger	Trigger method	hover | click | hover	hover
arrow	Whether to display the arrow	boolean	true

Slots

Slot Name	Description
default	Element that triggers the Tooltip display