或

Question

我在W3school看过this链接，我正在尝试在我的代码中创建它。并且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规则不匹配。

您已将Range("Q1:Q100").FormulaR1C1 = "=If(RC[-16]=""cob1"", 1,2)" '<-- this checks for 16 column to the left value in the same row类添加到其旁边的输入和写入tooltip（作为兄弟）。但根据您的CSS，tooltiptext应位于tooltiptext内。因此，在我的演示中，我添加了一个包含类tooltip的包装器，它将使用类tooltip包装输入和span。您可以根据需要进一步编辑。

＆＃13;

tooltiptext

＆＃13;

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

＆＃13;

Answer 2

.tooltiptext是悬停元素的下一个类。因此在css的悬停评论中使用+

.tooltip {
        position: relative;
        display: inline-block;
        border-bottom: 1px dotted black;
    }
    
   .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="tooltip"   placeholder="Purpose"
          th:field="*   {purpose}" th:required="required" id="Purpose"/>
        																
         <span class="tooltiptext">Article, Essay, Thesis, etc.</span>
        </div> 
      </div>

Answer 3

.tooltip是一个void元素，意味着它没有结束标记，因此它永远不会有任何子元素。

.tooltip  .tooltiptext

这意味着获取包含.tooltiptext类<{1>}的后代的元素。正如我之前提到的，.tooltip无法生孩子。

.tooltip

清理杂乱之后，可以明显地<input type="text" class="form-control tooltip" id="Purpose" /> <span class="tooltiptext">Article, Essay, Thesis, etc.</span>实际上是.tooltip的兄弟。更好的是，.tooltiptext是.tooltiptext的 相邻兄弟 。

.tooltip意味着让兄弟姐妹立即成为+

的兄弟姐妹

.tooltip

或

.tooltip:hover + .tooltiptext .tooltip + .tooltip意味着获得~之后的兄弟，所以它的具体情况稍微不那么明确，因为如果有必要的话，它可以在课程中使用类.tooltip定位兄弟姐妹。 / p>

.tooltiptext

请参阅有关sibling selectors

的文章

我还添加了Bootstrap文件，但它也可以在没有它们的情况下工作。

段

 .tooltip:hover ~ .tooltiptext 
 .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;
}

ToolTip的Css不起作用

3 个答案:

或

段