javascript - 我的 React 应用程序中未显示工具提示

Question

我已将工具提示放入我的 React 应用程序中，但没有显示任何一个。为什么是这样？错在哪里呢？我将在这里发布代码。

TooltipSpan.js

import React from 'react';
import { OverlayTrigger } from 'react-bootstrap';

const TooltipSpan = (props) => {
  const { tooltip, className } = props;

  return (
    <OverlayTrigger placement="top" overlay={tooltip}>
      <span className={className} />
    </OverlayTrigger>
  );
};

export default TooltipSpan;

将其导入到以下文件中。Like.js

import React, { Component } from 'react';
import { OverlayTrigger, Tooltip } from 'react-bootstrap';
import TooltipSpan from './TooltipSpan.js';

class Like extends Component {

  handleAddition = () => {
    this.props.onAddition();
  }

  handleDelete = () => {
    this.props.onDelete();
  }

  render() {
    const { isLiked, canLike, isBlocked, isReported } = this.props;
    const tooltipCannotLike = (
      <Tooltip id="cannot-like">You can not like a profile without a profile picture !</Tooltip>
    );
    const tooltipLike = (
      <Tooltip id="like">Like this profile to be able to talk to him. He also like you !</Tooltip>
    );

    if (isBlocked || isReported) {
      return <span className="fa fa-star cannot-like" />;
    }
    if (!canLike) {
      return <TooltipSpan className="fa fa-star cannot-like" tooltip={tooltipCannotLike} />;
    }
    if (isLiked) {
      return <button className="fa fa-star liked" onClick={this.handleDelete} />;
    }
    return (
      <OverlayTrigger placement="bottom" overlay={tooltipLike}>
        <span>
          <button
            className="fa fa-star-o"
            onClick={this.handleAddition}
          />
        </span>
      </OverlayTrigger>
    );
  }
}

export default Like;

Like.js 是一个文件。我有一个 block 和报告 js 文件，但在这些文件中也没有任何工具提示。我有一个问题。构建应用程序可以解决这样的问题吗？我还没有构建这个应用程序。

Answer 1

TooltipSpan.js 上有错误。您应该关闭您的span像这样<span className={className}>Some text</span>

我已将其复制到 codeSandbox