点击输入框时Tooltip不显示，如何将输入框设为Tooltip父元素？

首先明确：<input>是自闭合的空元素，无法包含任何子元素，所以你没法把tooltip设置成它的子元素。可以通过以下两种方式实现需求：

方法1：使用后续兄弟选择器（无需修改HTML结构） #

直接修改CSS中的选择器，利用后续兄弟选择器~来选中input后面的tooltip：

.tooltip {
    color: rgb(143, 143, 143);
    font-size: 14px;
    font-family: Arial;
    padding: 15px 24px 60px; /* 简化padding写法 */
    background-color: black;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    position: absolute;
    visibility: hidden;
    border-radius: 5px;
    bottom: -86px;
}

/* 用~选择器选中input后续的tooltip元素 */
.search_twitter:focus ~ .tooltip {
    visibility: visible;
}

HTML结构保持不变即可，当input获得焦点时，后续的tooltip会被选中并显示。

方法2：用父容器的:focus-within状态（更灵活） #

把input、搜索图标和tooltip放到同一个父容器中，利用:focus-within伪类——当容器内的任何元素获得焦点时，容器会触发该状态，从而控制tooltip显示：

修改后的HTML： #

<div class="t_header_right"> 
  <div class="search_container">
    <input type="text" placeholder="Search Twitter" class="search_twitter">
    <img src="thumbnails/svgexport-29.svg" class="search_icon">
    <div class="tooltip">
      Try searching for people, topics, or keywords
    </div>
  </div>
</div>

修改后的CSS： #

.search_container {
    position: relative; /* 让tooltip相对于该容器定位 */
    display: inline-block; /* 避免容器占满整行 */
}

.tooltip {
    color: rgb(143, 143, 143);
    font-size: 14px;
    font-family: Arial;
    padding: 15px 24px 60px;
    background-color: black;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
    position: absolute;
    visibility: hidden;
    border-radius: 5px;
    bottom: -86px;
    left: 0; /* 确保tooltip对齐容器 */
}

/* 容器内元素获得焦点时显示tooltip */
.search_container:focus-within .tooltip {
    visibility: visible;
}

这种方式更灵活，即使后续需要让搜索图标也触发tooltip，只要容器内元素有焦点，tooltip都会显示。

内容的提问来源于stack exchange，提问作者popsmoke