html - html css tooltips on hover event 我可以制作特定的宽度吗？

Question

我已经学会了如何做基本的工具提示，但是，我需要为每个工具提示指定一个宽度。我使用的代码来自 w3 学校：

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: -5px;
  left: 0%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

工具提示文本设置为 500 像素。我需要为每个“跨度”定义一个特定的宽度：

<div class="tooltip">
this is the text to hover 
  <span class="tooltiptext">
this is the tooltip display
</span>
</div>

我尝试了几种方法来定义宽度（<style="width: 800ps;"> text </style>) 它们都没有奏效。

标签： htmlcsshovertooltipinline

Answer 1

我想通了，它正在工作，我只是忘了禁用缓存。