Всплывающие подсказки не отображаются в моем приложении реакции

Question

Я включил всплывающие подсказки в свое приложение реакции, но ни одна из них не показывается. почему это? где лежит вина? Я опубликую код здесь.

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 - это один файл. У меня есть блок и отчет js файлов, и в этих файлах нет ни одной подсказки. У меня есть один вопрос. Помогает ли сборка приложения решить подобные проблемы? Я еще не создал это приложение.

Answer 1

Ошибка TooltipSpan.js. Вы должны закрыть свой span как этот <span className={className}>Some text</span>

Я воспроизвел его здесь на codeSandbox