1import React, { useState, useEffect } from 'react';
2import { Button, UncontrolledTooltip } from 'reactstrap';
3
4const shortText = 'Hi';
5const longText = 'Long tooltip content to test update';
6
7const TooltipContent = ({ update }) => {
8 const [text, setText] = useState(shortText);
9
10 useEffect(() => {
11 const intervalId = setInterval(() => {
12 setText(text === shortText ? longText : shortText);
13 update();
14 }, 1000);
15
16 return () => clearInterval(intervalId);
17 });
18
19 return (
20 <>{text}</>
21 );
22}
23
24const Example = () => {
25 return (
26 <div className="text-center">
27 <Button id="updateTooltip">Click me</Button>
28 <UncontrolledTooltip placement="top" target="updateTooltip" trigger="click">
29 {({ update }) => (
30 <TooltipContent update={update} />
31 )}
32 </UncontrolledTooltip>
33 </div>
34 );
35}
36
37export default Example;