Css style not applying

Question

So I'm just beginning with HTML and CSS in visual studio and for practice I'm making a clone of youtube..i want to add Tooltips for buttons like search..thus i added a div block for Tooltip next to the buttons...but css styling for the class tooltip isnt working but when style is written in-line(tag) it works...this has happened before with out blocks too..i tried in both chrome and brave browsers

HTML CODE:
<div class="middle">
<input class="search" type="text" placeholder="Search" >
<button class="searchbutton">
<img class="searchi" src="icons/search.svg">
<div><p class="tooltip">Search</p></div>
</button>
<button class="audiobutton"><img class="voicei" src="icons/voice-search-icon.svg">`your text`
<div class="tooltip" >Search with Audio</div>
</button>
</div>
CSS code:
.tooltip{background-color:grey;color:black}

other codes in the css file work perfectly fine

Answer 1

Shankara Subramanian Mohan You should have added your code file with this question so it would have been easier to understand where the problem is.

Answer 2

Don't put div and p(block elements) in buttons (inline elements).
Use the same structure for both buttons.
Try using span element:
<button class="searchbutton">
<img src="icon/search.svg"/>
<span class="tooltip">Search</span>
</button>

Answer 3

imo based on what i see, u need to add style tag when you writing css code inside html file where it should be like this:

CSS code:
<style>
.tooltip {
background-color:grey;
color:black;
}
</style>

edit:
also dont forget to link your css file to your html if you got separated file:)