React-Bootstrap：如何使用不同的文本创建工具提示？

Question

在 react-bootstap docs 中，他们展示了一个带有多个工具提示的段落示例，但他们从未展示过用于实现它的代码。但是，它们确实显示了用于执行单个硬编码工具提示的代码。

在这个例子中，我如何让一个超链接单词在悬停时显示“你好”，另一个在悬停时显示“再见”？

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;