html - 工具提示的 Css 不起作用

Question

我看过this来自 W3school 的链接，我正在尝试在我的代码中添加它。并且 css 是单独填充的:

.tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    
    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
    
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
    }
    
    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

     <div class="form-group">
       <label for="purpose" class="col-sm-2 control-label text-right" >Purpose</label>
       <div class="col-sm-6">
         <input type="text" class="form-control tooltip"   placeholder="Purpose"
          th:field="*   {purpose}" th:required="required" id="Purpose"/>
        																
         <span class="tooltiptext">Article, Essay, Thesis, etc.</span>
        </div> 
      </div>

问题是当我应用 tooltip 时，输入元素被隐藏了，但令人惊讶的是，它不会发生在 span 元素上。

那么，为什么它让我的输入不可见并且没有工具提示？

Answer 1

演示:

https://plnkr.co/edit/f88jEBhGIfVtm0eLa9Cf?p=preview

是因为你的html和CSS规则不匹配。

您已将 tooltip 类添加到输入并在其旁边写入 tooltiptext(作为同级)。但根据您的 CSS，tooltiptext 应该位于 tooltip 内。因此，在我的演示中，我添加了一个带有 tooltip 类的包装器，它将用 tooltiptext 类包装输入和跨度。您可以根据需要进一步编辑它。

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

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

    /* Position the tooltip */
    position: absolute;
    z-index: 1;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}

<div class="form-group">
 <label for="purpose" class="col-sm-2 control-label text-right" >Purpose</label>
 <div class="col-sm-6">
   <div class="tooltip">
     <input type="text" class="form-control"   placeholder="Purpose"
      th:field="*   {purpose}" th:required="required" id="Purpose"/>

     <span class="tooltiptext">Article, Essay, Thesis, etc.</span>
  </div> 
  </div>
</div>