🌈 An enterprise-class UI components based on Ant Design and Vue. 🐜
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

2.9 KiB

category type title cover coverDark
Components Data Display Tooltip https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*3u9eSZO_4c0AAAAAAAAAAAAADrJ8AQ/original https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*gwrhTozoTC4AAAAAAAAAAAAADrJ8AQ/original

A simple text popup tip.

When To Use

  • The tip is shown on mouse enter, and is hidden on mouse leave. The Tooltip doesn't support complex text or operations.
  • To provide an explanation of a 'button/text/operation'. It's often used instead of the html 'title' attribute.

API

Property Description Type Default
title The text shown in the tooltip string|slot -

Common API

The following APIs are shared by Tooltip, Popconfirm, Popover.

Property Description Type Default Version
align this value will be merged into placement's config, please refer to the settings dom-align Object -
arrowPointAtCenter Whether the arrow is pointed at the center of target boolean false
arrow Change arrow's visible state and change whether the arrow is pointed at the center of target. boolean | { pointAtCenter: boolean} true 4.2.0
autoAdjustOverflow Whether to adjust popup placement automatically when popup is off screen boolean true
color The background color string -
destroyTooltipOnHide Whether to destroy tooltip on hide boolean false
getPopupContainer The DOM container of the tip, the default behavior is to create a div element in body. (triggerNode: HTMLElement) => HTMLElement () => document.body
mouseEnterDelay Delay in seconds, before tooltip is shown on mouse enter number 0.1
mouseLeaveDelay Delay in seconds, before tooltip is hidden on mouse leave number 0.1
overlayClassName Class name of the tooltip card string -
overlayStyle Style of the tooltip card object -
overlayInnerStyle Style of the tooltip inner content object - 4.0.0
placement The position of the tooltip relative to the target, which can be one of top left right bottom topLeft topRight bottomLeft bottomRight leftTop leftBottom rightTop rightBottom string top
trigger Tooltip trigger mode hover | focus | click | contextmenu hover
open(v-model) Whether the floating tooltip card is open or not, Use visible under 4.0.0 boolean false 4.0.0

events

Events Name Description Arguments Version
openChange Callback executed when visibility of the tooltip card is changed (visible) => void 4.0

Note

Please ensure that the child node of Tooltip accepts mouseenter, mouseleave, focus, click events.