Home >Web Front-end >CSS Tutorial >How to Create a Fade-In/Out Tooltip for a Div Element using HTML and CSS?
You have a div element with a label and an input field. To enhance user experience, you want to display a tooltip on hover with a smooth fade in/out effect. This can be achieved using a combination of HTML and CSS.
Start by adding a title attribute to the div element. This attribute contains the tooltip text, such as:
<div title="Enter your name here"> <label>Name</label> <input type="text" /> </div>
This will display a default tooltip on hover.
To achieve the fade in/out effect, use CSS transitions:
/* Style the tooltip initially as invisible */ .tooltip { opacity: 0; transition: opacity 0.5s; } /* Style the tooltip on hover as visible with fade-in effect */ .tooltip:hover { opacity: 1; }
Assign the tooltip class to your div element to apply these styles.
Here's the complete code example:
<div class="tooltip" title="Enter your name here"> <label>Name</label> <input type="text" /> </div>
.tooltip { opacity: 0; transition: opacity 0.5s; height: 3em; width: 10em; background: yellow; } .tooltip:hover { opacity: 1; }
This code will add a fade in/out tooltip to your div element, providing a visually appealing and informative user experience.
The above is the detailed content of How to Create a Fade-In/Out Tooltip for a Div Element using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!