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.