<ToolTipController
detect="click"
offsetX="centre"
offsetY={20}>
<Select>
<Button variant="outlined">Click me</Button>
</Select>
<ToolTip/>
</ToolTipController>
<ToolTipController
detect="hover"
offsetX="centre"
offsetY={20}>
<Select>
<Button variant="outlined">Hover over me</Button>
</Select>
<ToolTip/>
</ToolTipController>
<ToolTipController
detect="hover-hold"
offsetX="centre"
offsetY={20}>
<Select>
<Button variant="outlined">Hover over me</Button>
</Select>
<ToolTip/>
</ToolTipController>
Button won't close when the cursor is moved out
<ToolTipController
detect="hover-interact"
closeOnClick={false}
timeOut={200}
offsetX="centre"
offsetY={20}>
<Select>
<Button variant="outlined">Hover over me</Button>
</Select>
<ToolTip/>
</ToolTipController>
The cursor can be moved over the tooltip before it closes
This option should be used with timeOut prop
<ToolTipController
id="5"
detect="hover"
offsetX="centre"
offsetY={20}
animation="fadeIn"
duration="200ms"
timing="ease"
properties={["opacity", "transform"]}>
<Select>
<Button variant="outlined">Hover over me</Button>
</Select>
<ToolTip/>
</ToolTipController>
.react-tooltip-5
opacity: 0
transform: translateY(10px)
&.fadeIn
opacity: 1
transform: translateY(0)
Tooltip has an animation class
<ToolTipController
detect="click"
offsetX="centre"
offsetY={20}
timeOut={1000}>
<Select>
<Button variant="outlined">Click me</Button>
</Select>
<ToolTip/>
</ToolTipController>
Tooltip will disapear after 1000ms
<ToolTipController
detect="click"
offsetX="centre"
offsetY={20}
closeOnClick={false}>
<Select>
<Button variant="outlined">Click me</Button>
</Select>
<ToolTipAdvanced/>
</ToolTipController>
Tooltip is interactable (Does not close when clicked on)
<ToolTipController
detect="click"
offsetX="centre"
offsetY={20}
closeOnClick={false}
returnState={this.getTooltipState}>
<Select>
<Button variant="outlined">Click me</Button>
</Select>
<ToolTipAdvanced/>
</ToolTipController>
state={
tooltipState: false
}
getTooltipState = (data) => {
this.setState({tooltipState: data})
}
Tooltip State: false
<ToolTipController
detect="click"
offsetX="centre"
offsetY={20}
closeOnClick={false}
triggerClose={this.state.trigger}
returnState={this.getOtherTooltipState}>
<Select>
<Button variant="outlined">Click me</Button>
</Select>
<ToolTipAdvanced close={this.close}/>
</ToolTipController>
state={
trigger: false
}
close = () => {
this.setState({trigger: true})
}
Button in the tooltip triggers the close action