React-Bootstrap: How to create tooltips with different text?

user_9190041 0
Viewed 325

In the react-bootstap docs, they show an examples of a paragraph with multiple tooltips, but they never show the code they used to achieve it. They do, however, show the code for doing a single, hard-coded tooltip.

In this example, how could I get one hyperlinked word to show “hello” on hover and the other one to show “goodbye” on hover?

import React from "react";
import OverlayTrigger from "react-bootstrap/OverlayTrigger";
import Tooltip from "react-bootstrap/Tooltip";
​
const renderTooltip = (props) => (
  <Tooltip id="button-tooltip" {...props}>
    hello
  </Tooltip>
);
​
class TestTooltip extends React.Component {
  render() {
    return (
      <div>
        What if I want a tooltip that says "hello"
        <OverlayTrigger placement="bottom" overlay={renderTooltip}><a href="#"> here </a></OverlayTrigger>
        and "goodbye" <OverlayTrigger placement="bottom" overlay={renderTooltip}><a href="#"> here </a></OverlayTrigger>?
      </div>
    );
  }
}
​
export default TestTooltip;

react-bootstrap
1 Answers

see this code:

import React from "react";
import Tooltip from 'react-bootstrap/Tooltip';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import Button from 'react-bootstrap/Button';

const TooltipButton = (props) => {
    if (props.text) {
        return (
            <OverlayTrigger
                placement="right"
                delay={{ show: 250, hide: 400 }}
                overlay={<Tooltip id="button-tooltip-2">{props.text}</Tooltip>}
            >
                <Button variant="success">i</Button>
            </OverlayTrigger>           
        );
    }
    else {
        return null;
    }
}

export default TooltipButton
user_127643350
Related