Top
Tooltip API - API
Tooltip API
Props (24)
Callback Props (4)
Styling Props (15)
Methods (2)
Bool
default: true
Whether to render an arrow.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { arrow: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.arrow}
          onChange={arrow => this.setState({arrow})}
        >
          arrow
        </CheckBox>
      </div>
      <div style={{display: 'inline-block'}}>
        Hover here to test the tooltip.
        <Tooltip
          positions={['bl-tl']}
          arrow={this.state.arrow}
        >
          Note the {this.state.arrow ? '' : 'missing '}arrow between tooltip and origin text.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Bool
default: false
Setting it to true will keep the focus inside <Tooltip />. When last element loses focus, first focusable node inside <Tooltip /> is focused.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { captureTabNavigation: false };
  }
  render() {
    return <div>
      <div style={{marginBottom: 20}}>
        <CheckBox
          checked={ this.state.captureTabNavigation }
          onChange={captureTabNavigation => this.setState({captureTabNavigation})}
        >
          captureTabNavigation
        </CheckBox>
      </div>
      <Tooltip
        target=".tooltip"
        captureTabNavigation={this.state.captureTabNavigation}
      >
        <div>
          Use Tab to navigate between elements
        </div>
        <div>
          <input placeholder="name" />
        </div>
        <div>
          <input placeholder="age" />
        </div>
      </Tooltip>
      <div
        className="tooltip"
        style={{display: 'inline-block'}}
      >
        Hover to activate the tooltip
      </div>
    </div>
  }
}

export default () => <App />
React.node|Fn(childrenParams)
default: undefined
Children for the <Tooltip /> can be set in the following ways:
  • React.node - any valid jsx
  • Fn(childrenParams): React.Node - any valid jsx, childrenParams has the following keys:
    • targetNode: DOMElement - element that matches the target prop
    • visible - passing the value to visible prop.
If children are not set, it will render the data-tooltip attribute set on target. data-tooltip can be an HTML string.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <div>
  <div style={{marginBottom: 20}}>
    <div>
      <strong>Plain HTML content:</strong>:
    </div>
    <Tooltip target=".tooltip" />
    <Button
      className="tooltip"
      data-tooltip="<div style='color: lightgreen;width: 80; height: 100; background: royalblue;padding: 20px'><div style='padding: 20px'>You can add HTML content<div><button>OK</button></div></div></div>"
    >
      Hover to see HTML tooltip
    </Button>
  </div>

  <div style={{marginBottom: 20}}>
    <div>
      <strong>React.node as content</strong>:
    </div>
    <Tooltip target=".react-button">
      <div style={{marginBottom: 20}}>
        <Button
        >
          Only React buttons here
        </Button>
        <div>
          Additional content can be added.
        </div>
      </div>
    </Tooltip>
    <Button className="react-button">
      Hover to see a tooltip with React elements
    </Button>
  </div>
  <div>
    <div>
      <strong>function</strong>:
    </div>
    <Tooltip target=".function">
      {({ targetNode, visible }) => {
        if (targetNode) { // will be null when there is no active node
          return <div style={{width: 200, height: 100, padding: 10, border: "1px solid white"}}>
            <div>Tooltip content wrapped inside a function:</div>
            <div>{targetNode.dataset.tooltip}</div>
          </div>
        }
      }}
    </Tooltip>
    <Button className="function" data-tooltip="This is the content from 'data-tooltip'">Edit</Button>
  </div>
</div>
Region|selector|{width:number, height:number, top:number, left: number}|DOM.node|Bool
default: true
The region to which the tooltip will fit. It will check positions in their default order.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

const wrapperStyle = {
  border: '1px dotted #e9580a',
  width: 400,
  height: 100
}

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { constrainTo: false }
  }

  render() {
    const constrainProps = this.state.constrainTo ?
      { constrainTo: '.wrapper' } :
      false;

    return <div>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.constrainTo}
          onChange={constrainTo => this.setState({constrainTo})}
        >
          constrainTo
        </CheckBox>
      </div>

      <div
        className="wrapper"
        style={wrapperStyle}
      >
        <div>
          This is the wrapper whom borders represent the constrain.
          <Tooltip
            {...constrainProps}
          >
            Note how the Tooltip is {this.state.constrainTo ? 'inside' : 'outside'} the wrapper area.
          </Tooltip>
        </div>
      </div>
    </div>
  }
}
export default () => <App/>
Bool
default: true
Uncontrolled version of visible.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div>
  <span>
    <Tooltip
      defaultVisible
    >
      This tooltip will hide automatically.
    </Tooltip>
    This text has a tooltip already visible.
  </span>
</div>
Bool
default: true
Offers smooth transition for visibility change.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fade: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.fade}
          onChange={fade => this.setState({fade})}
        >
          fade
        </CheckBox>
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition.
        <Tooltip
          fade={this.state.fade}
        >
          Fading is {this.state.fade ? 'enabled' : 'disabled'}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Number
default: 300
Animation duration for the fading effect, in milliseconds.
This prop is overwritten by fadeOutDuration and fadeInDuration.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fadeDuration: 100 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose how fade duration should be
        </div>
        <RadioButtonGroup
          radioValue={this.state.fadeDuration}
          onChange={(event) => this.setState({ fadeDuration: event.checkedItemValue})}
          radioOptions={[
            {label: 'none', value: 0},
            {label: 'fast', value: 100},
            {label: 'medium', value: 250},
            {label: 'slow', value: 750}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          fadeDuration={this.state.fadeDuration}
          fadeInDuration={null}
        >
          Fade duration is {this.state.fadeDuration}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Number
default: 300
Animation duration for the fade in effect, in milliseconds.
Associated props are fadeDuration and fadeOutDuration.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fadeInDuration: 100 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose how fade in should be
        </div>
        <RadioButtonGroup
          radioValue={this.state.fadeInDuration}
          onChange={(event) => this.setState({ fadeInDuration: event.checkedItemValue})}
          radioOptions={[
            {label: 'none', value: 0},
            {label: 'fast', value: 100},
            {label: 'medium', value: 250},
            {label: 'slow', value: 750}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          fadeInDuration={this.state.fadeInDuration}
        >
          Fade in duration is {this.state.fadeInDuration}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
String
default: "fadeTransitionFunction"
fadeIn CSS transition timing function.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fadeInTransitionFunction: 'ease' }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Select a CSS transition function for fadeIn
        </div>
        <RadioButtonGroup
          radioValue={this.state.fadeInTransitionFunction}
          onChange={(event) => this.setState({ fadeInTransitionFunction: event.checkedItemValue})}
          radioOptions={[
            {label: 'ease', value: 'ease'},
            {label: 'ease-in', value: 'ease-in'},
            {label: 'ease-out', value: 'ease-out'},
            {label: 'cubic-bezier(1, .11, .86, .15)', value: 'cubic-bezier(1, .11, .86, .15)'}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          fadeInTransitionFunction={this.state.fadeInTransitionFunction}
        >
          FadeIn transition function is {this.state.fadeInTransitionFunction}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Number
default: 50
Animation duration for the fade out effect, in milliseconds.
Associated props are fadeDuration and fadeInDuration.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fadeOutDuration: 100 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose how fade out should be
        </div>
        <RadioButtonGroup
          radioValue={this.state.fadeOutDuration}
          onChange={(event) => this.setState({ fadeOutDuration: event.checkedItemValue})}
          radioOptions={[
            {label: 'none', value: 0},
            {label: 'fast', value: 100},
            {label: 'medium', value: 250},
            {label: 'slow', value: 750}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          fadeOutDuration={this.state.fadeOutDuration}
        >
          Fade duration is {this.state.fadeOutDuration}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
String
default: "fadeTransitionFunction"
fadeout css transition timing function.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fadeOutTransitionFunction: 'ease' }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Select a CSS transition function for fade
        </div>
        <RadioButtonGroup
          radioValue={this.state.fadeOutTransitionFunction}
          onChange={(event) => this.setState({ fadeOutTransitionFunction: event.checkedItemValue})}
          radioOptions={[
            {label: 'ease', value: 'ease'},
            {label: 'ease-in', value: 'ease-in'},
            {label: 'ease-out', value: 'ease-out'},
            {label: 'cubic-bezier(1, .11, .86, .15)', value: 'cubic-bezier(1, .11, .86, .15)'}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          fadeOutTransitionFunction={this.state.fadeOutTransitionFunction}
        >
          FadeOut transition function is {this.state.fadeOutTransitionFunction}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
String
default: "ease"
fade css transition timing function.
This prop is overwritten by fadeInTransitionFunction and fadeOutTransitionFunction.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { fadeTransitionFunction: 'ease' }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Select a CSS transition function for fadeIn
        </div>
        <RadioButtonGroup
          radioValue={this.state.fadeTransitionFunction}
          onChange={(event) => this.setState({ fadeTransitionFunction: event.checkedItemValue})}
          radioOptions={[
            {label: 'ease', value: 'ease'},
            {label: 'ease-in', value: 'ease-in'},
            {label: 'ease-out', value: 'ease-out'},
            {label: 'cubic-bezier(1, .11, .86, .15)', value: 'cubic-bezier(1, .11, .86, .15)'}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          fadeTransitionFunction={this.state.fadeTransitionFunction}
        >
          Fade transition function is {this.state.fadeTransitionFunction}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Number
default: 300
The time, in milliseconds, after which tooltip will hide.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hideDelay: 100 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose how hide delay should be
        </div>
        <RadioButtonGroup
          radioValue={this.state.hideDelay}
          onChange={(event) => this.setState({ hideDelay: event.checkedItemValue})}
          radioOptions={[
            {label: 'none', value: 0},
            {label: 'fast', value: 100},
            {label: 'medium', value: 250},
            {label: 'slow', value: 750}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the visibility transition duration.
        <Tooltip
          hideDelay={this.state.hideDelay}
          fadeInDuration={null}
        >
          Tooltip will stay visible for {this.state.hideDelay} milliseconds.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Of course, the tooltip will not hide if visible is set to true.
String|String[]
default: "['mouseleave']"
Event, or array of events set on target, after which the tooltip will hide.
To setup events on which tooltip should show see showEvent.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <span>
  Hover to activate the tooltip.
  <Tooltip hideEvent={['click']} hideOnScroll={false}>
    This tooltip will hide after a click event.
  </Tooltip>
</span>
Bool
default: true
Whether to hide on click outside the component.
In this example hideEvent it is set to click , otherwise you cannot test, as tooltip hides on mouseLeave by default.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hideOnClickOutside: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.hideOnClickOutside}
          onChange={hideOnClickOutside => this.setState({hideOnClickOutside})}
        >
          hideOnClickOutside
        </CheckBox>
      </div>
      <div style={{position: 'relative', display: 'inline-block', border: '1px dashed #e9580a', width: 300, height: 70}}>
        Note the target region. Click outside this region to test.
        <Tooltip
          hideOnClickOutside={this.state.hideOnClickOutside}
          hideEvent={'click'}
          key={'tooltip-click-' + this.state.hideOnClickOutside}
        >
          Click outside the target to close the tooltip.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
In the example above, <Tooltip /> is instantiated on each change of hideOnClickOutside. This is required, since the props is registered only once, when component is mounted.
Bool
default: true
Whether to hide when Escape key is pressed.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hideOnEscape: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.hideOnEscape}
          onChange={hideOnEscape => this.setState({hideOnEscape})}
        >
          hideOnEscape
        </CheckBox>
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover on this text to show the tooltip.
        <Tooltip
          hideOnEscape={this.state.hideOnEscape}
          key={'tooltip-' + this.state.hideOnEscape}
        >
          Press Esc to hide the tooltip.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
In the example above, <Tooltip /> is instantiated on each change of hideOnEscape. This is required, since the props is registered only once, when component is mounted.
Bool
default: true
Whether to hide when on scroll triggered on window.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hideOnScroll: true }
  }

  render() {
    return <div style={{ border: '1px dotted blue', height: 150, overflow: 'auto' }}>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.hideOnScroll}
          onChange={hideOnScroll => this.setState({hideOnScroll})}
        >
          hideOnScroll
        </CheckBox>
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover on this text to show the tooltip.
        <Tooltip
          hideOnScroll={this.state.hideOnScroll}
          hideEvent={null}
          key={'tooltip-hide-on-scroll-' + this.state.hideOnScroll}
        >
          Scroll the page to hide the tooltip.
        </Tooltip>
      </div>
      <div style={{ height: 500 }} />
    </div>
  }
}
export default () => <App/>
In the example above, <Tooltip /> is instantiated on each change of hideOnScroll. This is required, since the props is registered only once, when component is mounted.
Number|Number[]|{x: Number, y:Number}
default: 10
Sets distance to the target. Offset can be set different for each position.
Example:
  • offset of 30 for position top, will only influence the y axis, by positioning the tooltip 30px above the target
  • offset of { x: 40, y: 30 } for position right, will position the tooltip 40px to the right of the target and 30px down.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div>
  <div style={{display: 'inline'}}>
    Tooltip with offset={'{ x: 40, y: 30 }'}
    <Tooltip
      offset={{ x: 40, y: 30 }}
      positions="right"
    >
      Note the positioning of the tooltip.
    </Tooltip>
  </div>
  <div style={{marginBottom: 20}} />
  <div style={{display: 'inline'}}>
    Tooltip with offset={30}
    <Tooltip
      offset={30}
      positions="right"
    >
      Note the positioning of the tooltip.
    </Tooltip>
  </div>
</div>
String|String[]
default: undefined
Specifies one or more positions that the <Tooltip /> can have relative to target. If more positions are provided, as an array, the tooltip will try them in order, until will find one that fits in constrainTo region or the the viewport by default.
Position is set using two substrings joined by a - character. First substring represents which side of the tooltip should align to which side of the target.
Possible substring values are:
  • tc - top center
  • tl - top left
  • tr - top right
  • rc - right center
  • bc - bottom center
  • br - bottom right
  • bl - bottom left
  • lc - left
There are 4 common predefined aliases for this positions: top,left, right and bottom.
Possible values are:
  • top
    • bc-tc - top
    • bl-tl - top aligned left
    • br-tr - top aligned right
    • br-tl - top left
  • right
    • lc-rc - right
    • tl-tr - right aligned top
    • bl-br - right aligned bottom
    • tl-br - bottom right
  • bottom
    • tc-bc - bottom
    • tl-bl - bottom aligned left
    • tr-br - bottom aligned right
    • tr-bl - bottom left
  • left
    • rc-lc - left
    • tr-tl - left aligned top
    • br-bl - left aligned bottom
Defaults to above values in order.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'

class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { position: 'top' };
  }

  render() {
    return  <div>
      <div style={{marginBottom: 20}}>
        <div style={{marginBottom: 20}}>
          Select a position alias
        </div>
        <RadioButtonGroup
          radioValue={this.state.position}
          radioOptions={[
            {label: 'top', value: 'top'},
            {label: 'right', value: 'right'},
            {label: 'bottom', value: 'bottom'},
            {label: 'left', value: 'left'}
          ]}
          onChange={event => this.setState({position: event.checkedItemValue})}
        />
      </div>
      <div style={{display: 'inline-block', marginTop: 80, marginLeft: 180}}>
        <div
          style={{height: 100, width: 200, border: '1px dashed lightgray', position: 'relative', padding: 10 }}
        >
          <div style={{height: 50, width: 165, position: 'relative', padding: 10}}>
            Hover over this text to see the tooltip and note its position.
          </div>
        </div>
        <Tooltip
          visible
          relativeToViewport={false}
          positions={this.state.position}
          key={'tooltip-w-pos' + this.state.position}
        >
          <div style={{height: 50, width: 165, position: 'relative', padding: 10 }}>
            Note how the centers of the sides align
          </div>
        </Tooltip>
      </div>
    </div>
  }
}

export default () => <App />
Bool
default: true
Sets whether the <Tooltip /> will have position=fixed instead of the default position=absolute.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { relativeToViewport: true }
  }

  render() {
    return <div style={{ border: '1px dotted blue', height: 150, overflow: 'auto' }}>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.relativeToViewport}
          onChange={relativeToViewport => this.setState({relativeToViewport})}
        >
          relativeToViewport
        </CheckBox>
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Scroll to test the difference.
        <Tooltip
          relativeToViewport={this.state.relativeToViewport}
          hideDelay={2000}
          hideEvent={['click']}
        >
          Note the position of the tooltip.
        </Tooltip>
      </div>
      <div style={{ height: 500 }} />
    </div>
  }
}
export default () => <App/>
Number
default: 100
The delay of tooltip appearance, in milliseconds, since it was triggered.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showDelay: 100 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Select showDelay
        </div>
        <RadioButtonGroup
          radioValue={this.state.showDelay}
          onChange={(event) => this.setState({ showDelay: event.checkedItemValue})}
          radioOptions={[
            {label: '0', value: 0},
            {label: '100', value: 100},
            {label: '1000', value: 1000}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover to toggle the tooltip and notice the time until it appears.
        <Tooltip
          showDelay={this.state.showDelay}
          fadeInDuration={null}
        >
          This tooltip was delayed with {this.state.showDelay} milliseconds.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
String|String[]
default: "['mouseenter']"
Event, or events to which to listen on target, that when triggered tooltip is shown (changes visible to true).
To setup events on which tooltip should hide see hideEvent.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showEvent: 'mouseenter' }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose on what event should the tooltip appear
        </div>
        <RadioButtonGroup
          radioValue={this.state.showEvent}
          onChange={(event) => this.setState({ showEvent: event.checkedItemValue})}
          radioOptions={[
            {label: 'click', value: 'click'},
            {label: 'mouseenter', value: 'mouseenter'},
            {label: 'mouseup', value: 'mouseup'},
            {label: 'mousedown', value: 'mousedown'}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        Hover or apply specific event to toggle the tooltip.
        <Tooltip
          showEvent={this.state.showEvent}
          key={'tooltip-event-' + this.state.showEvent}
        >
          This tooltip was generated by a {this.state.showEvent} event.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
DOMSelector|DOMElmeent|Fn(props)|null
default: undefined
Selector or DOM element, on which to listen for events and against which it should position itself.
When target is null | undefined, it will use its direct parent as target.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

export default () => <div>
  <div style={{marginBottom: 20}}>
    <div>
      <strong>target - string</strong> - tooltip is shared for all elements that match this selector
    </div>
    <Tooltip target=".targetTooltip" />
    <Button className="targetTooltip" data-tooltip="This tooltip is based on a selector">Ok</Button>
    <Button className="targetTooltip" data-tooltip="This tooltip is based on a selector as well">Cancel</Button>
  </div>
  <div style={{marginBottom: 20}}>
    <div>
      <strong>target a DOM element</strong> - the target is he button below, with an id selector
    </div>
    <Tooltip target={() => document.getElementById('okButton')} />
    <Button id="okButton" data-tooltip="Tooltip with target a DOM node">
      File
    </Button>
  </div>
  <div style={{marginBottom: 20}}>
    <div>
      <strong>no target defined</strong> - it default to its direct parent
    </div>
    <span>
      <Tooltip>
        Tooltip direct child of a Button.
      </Tooltip>
      This is a span. Hover the element to see the tooltip.
    </span>
  </div>
</div>
Bool
default: undefined
This prop controls the visibility of the <Tooltip />
The visible state can as well be changed by hideEvent or showEvent.
You can react to its change by subscribing to onVisibleChange, onShow or onHide events.
For uncontrolled behavior, see defaultVisible.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import CheckBox from '@zippytech/react-toolkit/CheckBox'
import '@zippytech/react-toolkit/CheckBox/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { visible: true }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <CheckBox
          checked={this.state.visible}
          onChange={visible => this.setState({visible})}
        >
          visible
        </CheckBox>
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        The tooltip appears by checking the checkbox above.
        <Tooltip
          visible={this.state.visible}
          relativeToViewport={false}
        >
          Visibility can be a controlled prop.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
If you use visible=true, it is probably recommended to use relativeToViewport=false as well, otherwise the tooltip will not match the target after scrolling the page.
Fn(props)
default: undefined
Called when fadein transition ends.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
export default () => <div>
  <span>
    A notification will show.
    <Tooltip
      onFadeInEnd={() => zippy.notification.first.addNotification({
        title: 'onFadeInEnd called',
        style: { marginTop: 56 }
      })}
    >
      Location info.
    </Tooltip>
  </span>
  <NotificationBoard id="first" />
</div>
Fn(props)
default: undefined
Called when fadein transition starts.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
export default () => <div>
  <span>
    A notification will show.
    <Tooltip
      onFadeInStart={() => zippy.notification.first.addNotification({
        title: 'onFadeInStart called',
        style: { marginTop: 56 }
      })}
    >
      Location info.
    </Tooltip>
  </span>
  <NotificationBoard id="first" />
</div>
Fn(props)
default: undefined
Called when fadeout transition ends.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
export default () => <div>
  <span>
    A notification will show.
    <Tooltip
      onFadeOutEnd={() => zippy.notification.first.addNotification({
        title: 'onFadeOutEnd called',
        style: { marginTop: 56 }
      })}
    >
      Location info.
    </Tooltip>
  </span>
  <NotificationBoard id="first" />
</div>
Fn(props)
default: undefined
Called when fadeout transition starts.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import NotificationBoard from '@zippytech/react-toolkit/Notification'
import '@zippytech/react-toolkit/Notification/index.css'
export default () => <div>
  <span>
    A notification will show.
    <Tooltip
      onFadeOutStart={() => zippy.notification.first.addNotification({
        title: 'onFadeOutStart called',
        style: { marginTop: 56 }
      })}
    >
      Location info.
    </Tooltip>
  </span>
  <NotificationBoard id="first" />
</div>
The component is made of three elements. The wrapper, a div to hold the content and an arrow. The arrow sits between the wrapper and the content div. The wrapper has only a border, the same border that is applied on the arrow. To add border radius, add both border radius value on content as well as on the wrapper.
String
default: undefined
ClassName added on arrow.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{margin: 10}}>
  <span
    data-tooltip="Take a look at the arrow of this tooltip."
  >
    <Tooltip arrowClassName="tooltip-arrow-background"  />
    Hover to see the tooltip.
  </span>
</div>
Number
default: 11
Width and height of the arrow.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { arrowSize: 5 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose the arrow size
        </div>
        <RadioButtonGroup
          radioValue={this.state.arrowSize}
          onChange={(event) => this.setState({ arrowSize: event.checkedItemValue})}
          radioOptions={[
            {label: '5', value: 5},
            {label: '9', value: 9},
            {label: '17', value: 17}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        This tooltip is always visible to see the arrow.
        <Tooltip
          arrowSize={this.state.arrowSize}
          visible
          relativeToViewport={false}
        >
          Tooltip has an arrow of size {this.state.arrowSize}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Object
default: undefined
Inline style applied on arrow.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div>
  <div style={{marginTop: 40, display: 'inline-block'}}>
    Tooltip arrow has an inline style with a custom background.
    <Tooltip
      arrowStyle={{ background: '#EBACDE' }}
      relativeToViewport={false}
      visible
    >
      The style is only applied to the arrow.
    </Tooltip>
 </div>
</div>
String
default: undefined
Inline background color style, used for the tooltip and arrow as well.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{display: 'inline-block', marginTop: 40, marginLeft: 30}}>
  Example of background
  <Tooltip
    background="#9acdff"
    visible
    relativeToViewport={false}
  >
    <div>
      This is an example of background.
    </div>
  </Tooltip>
</div>
String
default: undefined
Border CSS string applied on wrapper and arrow.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{display: 'inline-block', margin: 10}}>
  Example of border
  <Tooltip
    border="3px solid #e9580a"
  >
    <div>
      This is an example of tooltip border.
    </div>
  </Tooltip>
</div>
String
default: undefined
A custom CSS class that will be appended to the target.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{ marginTop: 50 }}>
  <Tooltip target=".tooltip-class-name" className="tooltip-color-blue" />
  <span
    className="tooltip-class-name"
    data-tooltip="This tooltip is not affected by the className"
  >
    The className is used to style this text.
  </span>
</div>
Number
default: undefined
A className used to stylize the content of the tooltip.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div>
  <div style={{marginTop: 80, display: 'inline-block'}}>
    The contentClassName does not affect this text.
    <Tooltip
      contentClassName="tooltip-custom-content"
      visible
      relativeToViewport={false}
    >
      Note that the style of the tooltip comes from the contentClassName
    </Tooltip>
  </div>
</div>
Because of the lower specificity of classes in CSS, the properties added in the corresponding class are overwritten from the inner styling of the <Tooltip />. Therefore you might have to use !important to make them effective.
Object
default: undefined
Inline style applied on the content wrapper.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div>
  This is an example of <code>contentStyle</code>, a style applied inline for the tooltip.
  The <code>style</code> prop adds a border with color <div style={{
    display: 'inline-block',
    width: 10,
    height: 10,
    marginRight: 2,
    border: '1px solid gray', background: '#e9580a'
  }} />orange, while <code>contentStyle</code> adds a border of color <div style={{
    display: 'inline-block',
    width: 10,
    height: 10,
    marginRight: 2,
    border: '1px solid gray', background: '#9acdff'
  }} />blue.
  <Tooltip
    style={{ padding: 5, border: '3px solid #e9580a' }}
    contentStyle={{ border: '3px solid #9acdff'}}
    positions="bottom"
    visible
    relativeToViewport={false}
  >
    The tooltip has an inline style
  </Tooltip>
</div>
Number
default: undefined
Height property for the wrapper style.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { height: 25 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 80}}>
        <div style={{marginBottom: 20}}>
          Choose the height of the wrapper
        </div>

        <RadioButtonGroup
          radioValue={this.state.height}
          onChange={(event) => this.setState({ height: event.checkedItemValue})}
          radioOptions={[
            {label: '25', value: 25},
            {label: '40', value: 40},
            {label: '50', value: 50}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        This tooltip is always visible to see the height change.
        <Tooltip
          positions={['bl-tl']}
          height={this.state.height}
          visible
          relativeToViewport={false}
          style={{transform: 'translateY(-20px)'}}
        >
          Tooltip wrapper has the height = {this.state.height}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
String|Number|{width:String|Number, height:String|Number}
default: undefined
Used to set maxWidth and maxHeight.
If its a Number|String it will set both dimensions to same value.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{display: 'inline-block'}}>
  Test of maxSize property.
  <Tooltip
    maxSize={250}
    positions="bottom"
  >
    Because of maxSize, this text grows at 250px on its width,
    and less on its height, because on height it's not required anymore.
  </Tooltip>
</div>
String|Number|{width:String|Number, height:String|Number}
default: undefined
Used to set minWidth and minHeight.
If is a Number|String both dimensions will have the same value.
See related maxSize.
See related maxSize.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{display: 'inline-block'}}>
  Test of <code>minSize</code> property. As the text occupies more than 150px,
  the width is larger than 150px.
  <Tooltip
    minSize={150}
    positions="bottom"
  >
    Height and width of this tooltip are at least 150px. They can grow as much as required.
  </Tooltip>
</div>
Number
default: undefined
Padding property for wrapper style.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { padding: 10 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 70}}>
        <div style={{marginBottom: 20}}>
          Choose the padding of the wrapper
        </div>

        <RadioButtonGroup
          radioValue={this.state.padding}
          onChange={(event) => this.setState({ padding: event.checkedItemValue})}
          radioOptions={[
            {label: '0', value: 0},
            {label: '10', value: 10},
            {label: '20', value: 20}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        This tooltip is always visible to see the padding change.
        <Tooltip
          padding={this.state.padding}
          visible
          relativeToViewport={false}
          style={ this.state.padding === 20 ? {transform: 'translateY(-20px)'} : null}
        >
          Tooltip wrapper has the padding = {this.state.padding}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Object
default: undefined
Inline style applied on wrapper.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'

export default () => <div style={{display: 'inline-block'}}>
  Hover to see the special tooltip.
  <Tooltip
    style={{ border: '3px solid #F5B041', padding: 5, opacity: .6}}
  >
    This tooltip has inline style applied for border, padding and opacity.
  </Tooltip>
</div>
Number
default: undefined
Width property for the wrapper style.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { width: 125 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 80}}>
        <div style={{marginBottom: 20}}>
          Choose the width of the wrapper
        </div>

        <RadioButtonGroup
          radioValue={this.state.width}
          onChange={(event) => this.setState({ width: event.checkedItemValue})}
          radioOptions={[
            {label: '125', value: 125},
            {label: '200', value: 200},
            {label: '300', value: 300}
          ]}
        />
      </div>
      <div style={{position: 'relative', display: 'inline-block'}}>
        This tooltip is always visible to see the width change.
        <Tooltip
          positions={['bl-tl']}
          width={this.state.width}
          visible
          relativeToViewport={false}
        >
          Tooltip wrapper has the width = {this.state.width}.
        </Tooltip>
      </div>
    </div>
  }
}
export default () => <App/>
Number
default: 100
z-index CSS property for inline style.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import RadioButtonGroup from '@zippytech/react-toolkit/RadioButtonGroup'
import '@zippytech/react-toolkit/RadioButtonGroup/index.css'
import RadioButton from '@zippytech/react-toolkit/RadioButton'
import '@zippytech/react-toolkit/RadioButton/index.css'

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { zIndex: 1 }
  }

  render() {
    return <div>
      <div style={{marginBottom: 50}}>
        <div style={{marginBottom: 20}}>
          Choose the z-index
        </div>
        <RadioButtonGroup
          radioValue={this.state.zIndex}
          onChange={(event) => this.setState({ zIndex: event.checkedItemValue})}
          radioOptions={[
            {label: '0', value: 0},
            {label: '1', value: 1},
            {label: '-1', value: -1}
          ]}
        />
      </div>
      <div style={{position: 'relative', border: '1px dotted gray'}}>
        <div style={{
          border: '4px solid #e9580a',
          background: '#9acdff',
          width: 200,
          height: 100,
          position: 'absolute',
          zIndex: 1,
          opacity: .5
        }}/>
        <div style={{marginTop: 100, display: 'inline-block'}}>
          Note how the tooltip changes its position on the stack.
          <Tooltip
            zIndex={this.state.zIndex}
            visible
            relativeToViewport={false}
          >
            Tooltip has zIndex = {this.state.zIndex}.
          </Tooltip>
        </div>
      </div>
    </div>
  }
}
export default () => <App/>
Fn()
undefined
Changes visible to false.
In the following example hideOnClickOutside is set to false, so that when buttons are clicked onHide is not triggered. Also, a hideDelay=10000 keeps the tooltip open so that you can make hide have effect.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    const hideTooltip = () => this.tooltip.hide()
    return <div>
      <div style={{marginBottom: 60}}>
        <Button onClick={hideTooltip}>hide tooltip</Button>
      </div>
      <span style={{ marginLeft: 5 }}>
        Play with <code>hide()</code> with the help of the button.
        <Tooltip
          ref={ref => this.tooltip = ref}
          hideOnClickOutside={false}
          hideDelay={10000}
        >
          This tooltip will hide in a few seconds, or when you call hide()
        </Tooltip>
      </span>
    </div>
  }
}
export default () => <App />
Fn()
undefined
Changes visible to true.
In this example hideOnClickOutside is set to false, so that when buttons are clicked onHide is not triggered.
import React from 'react'
import Tooltip from '@zippytech/react-toolkit/Tooltip'
import '@zippytech/react-toolkit/Tooltip/index.css'
import Button from '@zippytech/react-toolkit/Button'
import '@zippytech/react-toolkit/Button/index.css'

class App extends React.Component {
  render() {
    const showTooltip = () => this.tooltip.show()
    return <div>
      <div style={{marginBottom: 50}}>
        <Button onClick={showTooltip}>show tooltip</Button>
      </div>
      <span style={{ marginLeft: 5 }}>
        Play with <code>show()</code> with the help of the button.
        <Tooltip
          ref={ref => this.tooltip = ref}
          hideOnClickOutside={false}
          showEvent={null}
        >
          This tooltip only shows after a calling show()
        </Tooltip>
      </span>
    </div>
  }
}
export default () => <App />