0

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 class="t_header_right"> 
  <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>

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?

popsmoke
  • 47
  • 5
  • You don’t need to change your markup at all, contrary to the accepted answer. Just use a general sibling selector: `.search_twitter:focus ~ .tooltip` – Terry Oct 09 '22 at 07:23

1 Answers1

1

.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 class="t_header_right"> 
  <input type="text" placeholder="Search Twitter" class="search_twitter">
  <div class="tooltip">
    Try searching for people, topics, or keywords
  </div>
  <img src="thumbnails/svgexport-29.svg" class="search_icon">
</div>
ray
  • 26,557
  • 5
  • 28
  • 27