时间戳

首页 > 解决方案 > React-Bootstrap：如何使用不同的文本创建工具提示？

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

问题描述

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

在这个例子中，我怎样才能让一个超链接词在悬停时显示“你好”，而另一个超链接词在悬停时显示“再见”？

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

解决方案

看到这段代码：

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

推荐阅读