Tooltip not appearing when clicking on the input field-CodePudding

So I only want the tooltip to show when I click on the input field, but unfortunately, it doesn't appear at all... Here is my CSS / HTML:

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

.search_twitter:focus .tooltip {
    visibility: visible;
}

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

EDIT: So I realized it's most likely because the input box is not a parent of the tooltip, therefore, it can't use the CSS. Well, how do I make the input field a parent?

CodePudding user response：

.tooltip isn't a child of .search_twitter, so your .search_twitter:focus .tooltip selector doesn't hit.

You could move it to be the next sibling of the input and update the selector to use an adjacent sibling selector: search_twitter:focus .tooltip.

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

.search_twitter:focus   .tooltip {
    visibility: visible;
}

.t_header_right {
  position: relative; /* for tooltip positioning context */
}

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