React-Tooltip-Controller | Examples Page


            <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