HTML как правильно использовать всплывающую подсказку - PullRequest
Новая
       8

HTML как правильно использовать всплывающую подсказку

0 голосов
/ 30 апреля 2019

Я пытаюсь использовать механизм подсказок внутри моего 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.

EDIT
Это полный код моей функции рендеринга: 

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;
  }

1 Ответ

0 голосов
/ 30 апреля 2019

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

.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>
...