Show · Tooltip
Tooltip
Tooltip is used to identify an element or attach a small amount of auxiliary information. The most typical scenario is to explain the meaning of the icon to the user, display the truncated text, display the description of the picture, and so on.

Demos

How to import

Cautions

Tooltip needs to apply DOM event listeners to children. If the child element is a custom component, you need to ensure that it can pass properties to the underlying DOM element
At the same time, in order to calculate the positioning of the popup layer, it is necessary to obtain the real DOM elements of the children, so Tooltip supports the following types of children
  1. Class Component, it is not mandatory to bind ref, but you need to ensure that props can be transparently transmitted to the real DOM node
  2. Use the functional component wrapped by forwardRef to transparently transmit props and ref to the real DOM node in children
  3. Real DOM nodes, such as span, div, p...

Position

The direction and alignment position of the popup layer can be configured through position. For detailed optional values of position, please refer to the API document below
When configured as topLeft, it pops up, and the popup layer is left-aligned with the children (when arrowPointAtCenter=false) . When configured as topRight, it pops up, and the popup layer is right-aligned with the children (when arrowPointAtCenter=false) . Same for other directions

Arrow Point at Center

By default arrowPointAtCenter=true, the small triangle always points to the center of the children element.
You can set it to false and the little triangle will no longer keep pointing to the center of the element. The popover is aligned to the edges of the children

Trigger Timing

  • Configure the timing of the trigger display, the default is hover, optional hover / focus / click / custom .
  • When set to custom, it needs to be used in conjunction with the visibleattribute, at which point the display is completely controlled

Override Style

Configure specific styles for the pop-up layer through the className and style API, such as overriding the default maxWidth (280px)

Render to Specified DOM

With getPopupContainer the bullet layer will be rendered to the DOM returned by the function.
It should be noted that: The returned container, if not document.body,position Will be set by default "relative"(Version > = 0.18.0).

Use with Popver or Popconfirm

Tooltip, Popconfirm, and Popover all need to hijack related events of children (onMouseEnter / onMouseLeave / onClick ....) to configure trigger. If used directly, it will invalidate the outer trigger.
Need to add a layer of elements (div or span) in the middle to prevent trigger event hijack failure.

API Reference


PropertiesInstructionsTypeDefaultVersion
autoAdjustOverflowWhether the floating layer automatically adjusts its direction when it is blockedbooleantrue
arrowPointAtCenterWhether the "small triangle" points to the center of the element, you need to pass in "showArrow = true" at the same timebooleantrue0.34.0
classNamePop-up layer classnamestring
contentPop-up layer contentstringReactNode
clickToHideWhether to automatically close the elastic layer when clicking on the floating layer and any element insidebooleanfalse0.24.0
disableFocusListenerWhen trigger is hover, does not respond to the keyboard focus popup event, see details at issue#977booleanfalse2.17.0
getPopupContainerSpecifies the parent DOM, and the bullet layer will be rendered to the DOM() => HTMLElement() => document.body
marginCalculate the added redundancy value when overflowing, see issue#549number | { marginLeft: number; marginTop: number; marginRight: number; marginBottom: number }02.23.0
mouseEnterDelayAfter the mouse is moved in, the display delay time, in milliseconds (only effective when the trigger is hover/focus)number50
mouseLeaveDelayThe time for the delay to disappear after the mouse is moved out, in milliseconds (only effective when the trigger is hover/focus), and is not less than mouseEnterDelaynumber50
motionWhether to show the pop-up motionbooleantrue
positionPop-up layer display position, optional value: top, topLeft, topRight, left, leftTop, leftBottom, right, rightTop, rightBottom, bottom, bottomLeft, bottomRightstring'top'
prefixClsThe className prefix of the pop-up layer wrapper div. When this item is set, the pop-up layer will no longer have the style of Tooltip.string'semi-tooltip '
preventScrollIndicates whether the browser should scroll the document to display the newly focused element, acting on the focus method inside the component, excluding the component passed in by the userboolean
rePosKeyThis value can be updated to manually trigger the repositioning of the pop-up layer.stringnumber
stylePop-up layer inline styleobject
spacingThe distance between the pop-up layer and the children elementnumber
showArrowDoes it show an arrow triangle?booleantrue
stopPropagationWhether to prevent click events on the bomb layer from bubblingbooleanfalse0.34.0
transformFromCenterWhether to transform from the horizontal or vertical center of the element of the package, this parameter affects only the `tansform-origin 'of the dynamic effect transformation and generally does not need to be changedbooleantrue
triggerTiming of triggering display, optional value: hover/focus/click/customstring'hover'
visibleWhether to show the pop-up layerboolean
wrapperClassNameWhen children are disabled or children are multiple elements, the outer layer will wrap a layer of span elements, and the api is used to set the style class name of this spanstring1.32.0
wrapperIdThe id of the wrapper node of the popup layer. The aria attribute of the trigger points to this id.string2.11.0
zIndexBullet levels.number1060
onVisibleChangeA callback triggered when the pop-up layer is displayed/hidden(isVisible: boolean) => void
onClickOutSideCallback when the pop-up layer is in the display state and the non-Children, non-floating layer inner area is clicked (only valid when trigger is custom, click)(e:event) => void2.1.0

Accessibility

ARIA

  • Tooltip has a tooltip role, following the definition of Tooltip in the WAI-ARIA specification
  • Tooltip's content and children
    • about content
      • The wrapper of content will be automatically added with id attribute to match the aria-describedby of children and associate content with children
    • about children
      • There should be an explicit connection between the content of the Tooltip and its children. Tooltip will automatically add the aria-describedby attribute to the children element, the value is the id of the content wraper.
      • If the children of your Tooltip are Icon and do not contain visible text, we recommend that you add the aria-label attribute to the children to describe accordingly

Content Guidelines

  • Only display information description and guidance, do not display error information
  • Only extra links and buttons not in tooltip
  • Try to simplify the description to one sentence without showing punctuation marks

Design Tokens

FAQ

  • Why Tooltip does not set style word-break to all or word?
    Content in difference languages (e.g. English, Chinese, combination of English and Chinese) may require different styles in terms of word-break, so Semi does not use a default setting. You could use corresponding CSS styles to your own needs.