How to Change the Tooltip Position to Top-Bottom ?
The tooltip is a hint that appears when you hover over an element in the User Interface. You can easily create a tooltip using HTML and CSS by changing the visibility property and hover selector. The tooltip can be positioned top-bottom using the CSS top and CSS bottom properties.
Approach
- Create the layout of the page with appropriate class name in HTML.
- Apply appropriate styling to the element and the tooltip text.
- Position the tooltip absolute and use top, bottom positioning properties to position the tooltip to the top and bottom side of the element.
- Set the visibility property to hidden for the tooltip text.
- Apply hover selector to the element and set the visibility property to visible, so that on hovering the element the tooltip appears.
Example: Create an HTML file and a CSS file and write the following codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<link rel="stylesheet"
href="style.css">
<title>Change Tooltip position to top-bottom</title>
</head>
<body>
<header>
<h1>w3wiki</h1>
<p>Tooltip position to top-bottom</p>
</header>
<main>
<div class="content">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20230913133830/GFG.jpg"
alt="GFG logo">
<p class="tooltip top">GFG logo</p>
</div>
<div class="content">
<img src=
"https://media.w3wiki.net/wp-content/uploads/20240218121512/gfg1.jpg"
alt="GFG Practice">
<p class="tooltip bottom">GFG Practice logo</p>
</div>
</main>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
background: rgb(47, 255, 141);
color: white;
}
header {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 5rem;
}
/* GFG Heading */
header h1 {
font-size: 4rem;
background-color: #fff;
color: green;
border-radius: 3rem;
padding: .5rem 1.5rem;
margin-bottom: 2rem;
}
header p {
font-size: 3rem;
}
main {
display: flex;
gap: 5vw;
margin-top: 10rem;
}
.content {
width: min(250px, 30vw);
height: min(200px, 25vw);
position: relative;
border: 2px solid green;
cursor: pointer;
}
.content img {
width: 100%;
height: 100%;
object-fit: cover;
}
.tooltip {
visibility: hidden;
position: absolute;
width: 100%;
padding: .5rem 1rem;
text-align: center;
font-size: min(1.5rem, 2vw);
color: white;
background-color: green;
border-radius: .2rem;
transform-style: preserve-3d;
}
.top {
top: -40%;
}
.bottom {
bottom: -40%;
}
/* Arrows */
.top::after,
.bottom::before {
content: '';
width: 30px;
height: 30px;
position: absolute;
left: 50%;
transform: translateX(-50%) translateZ(-1px) rotateZ(45deg);
background-color: green;
}
.top::after {
bottom: -30%;
}
.bottom::before {
top: -30%;
}
.content:hover {
outline: 5px solid green;
}
.content:hover .top,
.content:hover .bottom {
visibility: visible;
}
Output:
Contact Us