Tooltip

Tooltips are powerful components powered behind the scenes by Popper.js that can be attached to any element.

Basic Example

Tooltips can be created using the Tooltip component.

import React from "react";
import { Tooltip, Button } from "shards-react";

export default class TooltipExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <div>
        <Button id="TooltipExample">Hover Me!</Button>
        <Tooltip
          open={this.state.open}
          target="#TooltipExample"
          toggle={this.toggle}
        >
          😁 Woo! I am a tooltip!
        </Tooltip>
      </div>
    );
  }
}

Placement

By default, the tooltips are placed on top. However, you can change this via the placement prop.

import React from "react";
import { Tooltip, Button } from "shards-react";

export default class TooltipPlacementExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = {
      top: false,
      left: false,
      bottom: false,
      right: false
    };
  }

  toggle(pos) {
    const newState = {};
    newState[pos] = !this.state[pos];
    this.setState({ ...this.state, ...newState });
  }

  render() {
    return (
      <div>
        <Button id="TooltipTop" className="mr-2">
          Top
        </Button>
        <Tooltip
          open={this.state.top}
          target="#TooltipTop"
          toggle={() => this.toggle("top")}
        >
          I am on top! ☝️
        </Tooltip>

        <Button id="TooltipBottom" className="mr-2">
          Bottom
        </Button>
        <Tooltip
          placement="bottom"
          open={this.state.bottom}
          target="#TooltipBottom"
          toggle={() => this.toggle("bottom")}
        >
          I am at the bottom! 👇
        </Tooltip>

        <Button id="TooltipLeft" className="mr-2">
          Left
        </Button>
        <Tooltip
          placement="left"
          open={this.state.left}
          target="#TooltipLeft"
          toggle={() => this.toggle("left")}
        >
          I am on the left! 👈
        </Tooltip>

        <Button id="TooltipRight" className="mr-2">
          Right
        </Button>
        <Tooltip
          placement="right"
          open={this.state.right}
          target="#TooltipRight"
          toggle={() => this.toggle("right")}
        >
          I am on the right! 👉
        </Tooltip>
      </div>
    );
  }
}

Triggers

You can control what triggers your tooltip to show using the trigger prop.

import React from "react";
import { Tooltip, Button } from "shards-react";

export default class TooltipClickExample extends React.Component {
  constructor(props) {
    super(props);
    this.toggle = this.toggle.bind(this);
    this.state = { open: false };
  }

  toggle() {
    this.setState({
      open: !this.state.open
    });
  }

  render() {
    return (
      <div>
        <Button id="TooltipClickExample">Click Me!</Button>
        <Tooltip
          trigger="click"
          open={this.state.open}
          target="#TooltipClickExample"
          toggle={this.toggle}
        >
          😁 You clicked to see me!
        </Tooltip>
      </div>
    );
  }
}

Props

The following props are available for the Tooltip component.

Prop	Description	Type	Default	Required
target	The target element.	`Custom`	-	No
container	The tooltip container.	`Custom`	-	No
trigger	The trigger(s) (click, hover, focus).	`String`	`"hover"`	No
open	Whether the tooltip is open, or not.	`Bool`	`false`	No
disabled	Whether the tooltip is disabled, or not.	`Bool`	`false`	No
className	The tooltip class name.	`String`	-	No
arrowClassName	The arrow class name.	`String`	-	No
innerClassName	The tooltip inner class name.	`String`	-	No
offset	The tooltip offset.	`StringNumber`	-	No
delay	The show/hide delay in ms.	`NumberShape`	`{ show: 0, hide: 0 }`	No
boundariesElement	The boundaries element for the tooltip instance.	`StringElement`	-	No
placement	The tooltip placement.	`Enum`	`"top"`	No
placementPrefix	The placement prefix.	`String`	`"bs-tooltip"`	No
noArrow	Whether to hide the arrow, or not.	`Bool`	`false`	No
toggle	The toggle function.	`Func`	`function() {}`	No
modifiers	Popper modifiers object.	`Object`	-	No
autohide	Whether the tooltip should auto-hide, or not.	`Bool`	`true`	No