Reactstrap Tooltips

A Bootstrap tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element.
Keep reading these examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Example

import React from "react";

// reactstrap components
import { Button, UncontrolledTooltip } from "reactstrap";

function Example() {
  return (
    <>
      <Button
        className=" btn-tooltip"
        color="primary"
        id="tooltip734051587"
        size="sm"
        type="button"
      >
        Primary
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-primary"
        delay={0}
        placement="top"
        target="tooltip734051587"
      >
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        className=" btn-tooltip"
        color="info"
        id="tooltip416951769"
        size="sm"
        type="button"
      >
        Info
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-info"
        delay={0}
        placement="top"
        target="tooltip416951769"
      >
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        className=" btn-tooltip"
        color="success"
        id="tooltip784366606"
        size="sm"
        type="button"
      >
        Success
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-success"
        delay={0}
        placement="top"
        target="tooltip784366606"
      >
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        className=" btn-tooltip"
        color="warning"
        id="tooltip243984331"
        size="sm"
        type="button"
      >
        Warning
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-warning"
        delay={0}
        placement="top"
        target="tooltip243984331"
      >
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        className=" btn-tooltip"
        color="danger"
        id="tooltip543855357"
        size="sm"
        type="button"
      >
        Danger
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-danger"
        delay={0}
        placement="top"
        target="tooltip543855357"
      >
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        className=" btn-tooltip"
        color="default"
        id="tooltip222167412"
        size="sm"
        type="button"
      >
        Default
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-default"
        delay={0}
        placement="top"
        target="tooltip222167412"
      >
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        className=" btn-tooltip"
        color="secondary"
        id="tooltip293044081"
        size="sm"
        type="button"
      >
        Secondary
      </Button>
      <UncontrolledTooltip
        innerClassName="bg-secondary"
        delay={0}
        placement="bottom"
        target="tooltip293044081"
      >
        Tooltip on top
      </UncontrolledTooltip>
    </>
  );
}

export default Example;

Position

import React from "react";

// reactstrap components
import { Button, UncontrolledTooltip } from "reactstrap";

function Example() {
  return (
    <>
      <Button
        color="primary"
        data-placement="top"
        id="tooltip198087688"
        size="sm"
        type="button"
      >
        Tooltip on top
      </Button>
      <UncontrolledTooltip delay={0} placement="top" target="tooltip198087688">
        Tooltip on top
      </UncontrolledTooltip>
      <Button
        color="primary"
        data-placement="right"
        id="tooltip299782200"
        size="sm"
        type="button"
      >
        Tooltip on right
      </Button>
      <UncontrolledTooltip
        delay={0}
        placement="right"
        target="tooltip299782200"
      >
        Tooltip on right
      </UncontrolledTooltip>
      <Button
        color="primary"
        data-placement="bottom"
        id="tooltip457917317"
        size="sm"
        type="button"
      >
        Tooltip on bottom
      </Button>
      <UncontrolledTooltip
        delay={0}
        placement="bottom"
        target="tooltip457917317"
      >
        Tooltip on bottom
      </UncontrolledTooltip>
      <Button
        color="primary"
        data-placement="left"
        id="tooltip877016198"
        size="sm"
        type="button"
      >
        Tooltip on left
      </Button>
      <UncontrolledTooltip delay={0} placement="left" target="tooltip877016198">
        Tooltip on left
      </UncontrolledTooltip>
    </>
  );
}

export default Example;

Props

If you want to see more examples and properties please check the official Reactstrap Documentation.