Question

我正在尝试在div中使用工具提示机制。根据文档，这就是我所做的：

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div className="tooltip">
  Info
  <span className="tooltiptext">
        {this.state.singleFunctionality.description}
    </span>
</div>

问题在于文本Info根本没有显示。
我使用className是因为我正在使用React。

编辑
这是我的渲染函数的完整代码：

render() {
    return (
        <div className="row statusRow">
          {<div><b>{this.state.singleFunctionality.name}</b></div>}
          {<div className="tooltip">Info<span className = "tooltiptext">{this.state.singleFunctionality.description}</span> </div>}
          {<div>{this.state.singleFunctionality.startTime}</div>}
          {<div>{this.state.singleFunctionality.elapsedTime}</div>}
          {<div>{this.getServiceStatusWidget(this.state.singleFunctionality.status)}</div>}
        </div>
    );

  }

这是该类的完整CSS：

.statusRow {
    margin-top: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    /* background: #0c2e44; */
    background: rgb(12,46,68);
    background: radial-gradient(circle, rgba(12,46,68,1) 0%, rgba(17,69,102,1) 100%);
}

.statusCol {
    text-align: left;
    padding-top: 5px;
    color: #f6fdfe;
}

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
  }

  /* Tooltip text */
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
  }

  /* Show the tooltip text when you mouse over the tooltip container */
  .tooltip:hover .tooltiptext {
    visibility: visible;
  }

Answer 1

您发布的代码似乎没有问题。我对其进行了编辑，以使其不具有特定反应性，但仍存在所需的工具提示结果。

.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  /* If you want dots under the hoverable text */
}


/* Tooltip text */

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */

.tooltip:hover .tooltiptext {
  visibility: visible;
}

<div class="tooltip">Info<span class="tooltiptext">Description</span> </div>

HTML如何正确使用工具提示

1 个答案: