A Nextjs 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
Tooltip on top
Tooltip on right
Tooltip on bottom
Tooltip on left
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 .