ant-design-vue/components/tooltip/index.en-US.md
tangjinzhou 2ee3d43534
Feat css var (#5327)
* style: affix & util

* feat(alert): add customIcon slot

* feat(anchor): ts type

* style: auto-complete

* feat: avatar add crossOrigin & maxPopoverTrigger

* style(backTop): v-show instead v-if

* style: badge

* style: breadcrumb

* feat: button add global size

* feat: update i18n

* feat: picker add disabledTime

* test: update snap

* doc: update img url

* style: fix Card tabs of left position

* doc: update cascader doc

* feat: collapse

* style: comment

* style: configprovider

* feat: date-picker add soem icon slot

* style: update descriptions style

* feat: add divider orientationMargin

* doc: update drawer

* feat: dropdown add destroyPopupOnHide & loading

* style: update empty

* feat: form add labelWrap

* style: update grid

* test: update grid snap

* fix: image ts error

* fix: mentions cannot select, close #5233

* doc: update pagination change info, close #5293

* fix: table dynamic expand error, close #5295

* style: remove not use

* release 3.0.0-beta.11

* doc: update typo

* feat: input add showCount

* feat: inputNumber add prefix slot

* style: update layout

* style: update list

* feat: add locale i18

* style: update locale ts

* style: update mentions

* feat: menu divider add dashed

* perf: menu

* perf: menu animate

* feat: modal method add wrapClassName

* style: update pageheader

* feat: update pagination ts

* feat: confirm add showCancel & promise

* doc: update popover

* style: update progress

* style: radio

* style: update rate、result、row

* feat: select add fieldNames

* feat: add skeleton button & input

* feat: spin tip support slot

* style: slider & space

* stype: update steps ts type

* style: update switch

* feat: table add tree filter

* test: update input sanp

* feat: table add filterMode...

* fix: tree autoExpandParent bug

* test: update input snap

* doc: tabs add destroyInactiveTabPane

* style: update tag

* style: update timeline & time-picker

* fix: Tooltip arrowPointAtCenter 1px shift bug

* feat: typography add enterEnterIcon triggerType

* doc: update tree-select

* fix: deps and TypeScript types

* style: udpate transfer

* style: update style

* doc: add colorScheme

* chore: add css var builg

* doc: sort api

* style: lint code

* doc: add css var

* test: update snap

* chore: add pre script

* chore: update lint

* perf: collapse animate

* perf: collapse tree

* perf: typography shaking when edit

* doc: update auto-complete demo

* fix: table tree not have animate

* feat: deprecated dropdown center placement

* feat: deprecated dropdown center placement

* test: update snap
2022-03-12 09:56:32 +08:00

2.5 KiB

category type title cover
Components Data Display Tooltip https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg

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
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
autoAdjustOverflow Whether to adjust popup placement automatically when popup is off screen boolean true
color The background color string -
defaultVisible Whether the floating tooltip card is visible by default boolean false
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. Function(triggerNode) () => 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 -
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
visible(v-model) Whether the floating tooltip card is visible or not boolean false

events

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

Note

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