Question

我正在尝试创建一个简单的工具提示，而不需要js。

我想知道最好的方法是什么。我希望动态文本能够顺利地放在工具提示容器中，响应地放在容器的顶部，当前代码的问题在于它不会自行伸展，它会将单词分成新行，这会改变高度整个事情，然后定位关闭，它与容器重叠。

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  height: 25px;
  width: 25px;
  position: relative;
}

div {
  position: absolute;
  top: -25px;;
}

span {
  display: inline-block;
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  font-size: 15px;
  padding: 5px;
  width: auto;
}

td:hover div span {
  display: inline-block;
}

<table>
  <tr>
    <td>
    something
      <div>
        <span>
          text
        </span>
      </div>
    </td>    
    <td>
    something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

Answer 1

你的意思是什么？让我知道。

如果您希望工具提示高于悬停项，请将bottom:100%添加到工具提示元素。

＆＃13;

table {
  margin-top: 100px;
}

td {
  border: solid 1px #000;
  height: 25px;
  width: 150px;
  position: relative;  
  /*style to show it better to you*/
  display:block;
  margin-right:50px;
  float:left;
}

div {
  position: absolute;
  bottom: 100%;
  left:50%;
  width:60px;
  margin-left:-30px;
}

span {
  display: none;
  border-radius: 5px;
  background: #000;
  color: #fff;
  font-size: 15px;
  padding: 5px;
  width: auto;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: normal;
  white-space: nowrap;
  width:100%;
  text-align:center;
}

td:hover div span {
  display: inline-block;
}

＆＃13;

<table>
  <tr>
    <td>
      something
      <div>
        <span>
          text
        </span>
      </div>
    </td>
    <td>
      something
      <div>
        <span>
          some long text
        </span>
      </div>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

如果您不想在tooltip中破解文字，可以使用white-space: nowrap。您还可以使用transform: translate()在td With arrow

中间放置工具提示

＆＃13;

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  white-space: nowrap;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

td:hover span {
  opacity: 1;
}

＆＃13;

<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

＆＃13;

或者，如果您希望tooltip与td的尺寸相同，则可以使用width: 100%

＆＃13;

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 5px;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

td:hover span {
  opacity: 1;
}

＆＃13;

<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

＆＃13;

您还可以使用:after伪元素在工具提示下添加小箭头

＆＃13;

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  position: relative;
}

span {
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  width: 100%;
  padding: 5px;
  top: -10px;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition: all 0.3s ease-in;
}

span:before {
  width: 0; 
  height: 0; 
  content: '';
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 7px solid black;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 100%);
}

td:hover span {
  opacity: 1;
}

＆＃13;

<table>
  <tr>
    <td>something<span>text</span></td>    
    <td>something<span>some long text</span></td>
    <td>Lorem ipsum dolor.<span>Lorem ipsum dolor sit amet, consectetur.</span></td>
  </tr>
</table>

＆＃13;

Answer 3

format('1') // '1,00'
format('123') // '123,00'

table {
  margin-top: 100px;
}
  
td {
  border: solid 1px #000;
  height: 25px;
  width: 25px;
  position: relative;
}

div {
  position: absolute;
  top: -25px;;
}

span {
  display: inline-block;
  border-radius: 5px;
  background: #000;
  color: #fff;
  position: absolute;
  font-size: 15px;
  padding: 5px;
  width: auto;
white-space: nowrap;
}

td:hover div span {
  display: inline-block;
}

尝试使用white-space：nowrap;

css将单词分成新行并变为偏离定位

3 个答案: