Feedback

Tooltip

A tooltip is a floating label that provides brief additional information about an interface component.
View source
1
import {Tooltip} from '@coveord/plasma-react';
2


3
export default () => (
4
    <Tooltip title="I am a tooltip!" placement="right" noSpanWrapper>
5
        <button type="button" className="btn">
6
            Hover me!
7
        </button>
8
    </Tooltip>
9
);

Props

NameTypeDefaultDescription
titlerequiredReactNode
The text displayed inside the tooltip
animationany
childrenReactNode
classNamestring
Additionnal CSS class the tooltip should have
containerstring
defaultOverlayShownboolean
delaynumber
delayHidenumber
delayShownumber
footerstring
Add a footer to the tooltip
noSpanWrapperboolean
By default, <Tooltip /> wraps children inside a span element to make sure the tooltip is applied on one html element only. Use noSpanWrapper to avoid wrapping your children inside a span. CAUTION: Make sure you have only 1 child if you use this prop.
onClick(...args: any[]) => void
onEnter(...args: any[]) => void
onEntered(...args: any[]) => void
onEntering(...args: any[]) => void
onExit(...args: any[]) => void
onExited(...args: any[]) => void
onExiting(...args: any[]) => void
placementstring
The position of the tooltip should have - Use the TooltipPlacement enum from TooltipUtils
rootCloseboolean
triggerstring | string[]
arrowOffsetLeftdeprecatedReactText
Do not use
arrowOffsetTopdeprecatedReactText
Do not use
bsStyledeprecatedstring
Do not use
positionLeftdeprecatednumber
Do not use
positionTopdeprecatednumber
Do not use

Do

  • The text must be direct and to the point, ideally a max of 3 lines. Link to external documentation when detailed explanations are required.
  • Tooltips must appear in empty areas of the screen, or on top of less relevant information.
  • Only show one Tooltip at a time.

Do Not

  • Use tooltips to display required information. Pertinent information must be presented in the regular text.
  • Add tooltips that display the same text as what can already be read in the interface (e.g., a tooltip with "Print" is not necessary on a button with the label “Print”).
  • Use tooltips for information regarding errors or warnings. Displaying this information is too important to depend on hovering.
Edit guidelines