Currently, I'm trying to make a tooltip of an image in my navbar and I can't figure out how to center it. Essentially, I have a div in mynavbar and I have tooltip that comes out when hovered. I want the tooltip to be positioned such that the center of the tooltip aligns with the center of the image in the div. The problem is I can't use 'left:50%' since it refers to 50% of the parent navbars width which is 100%. This positions the tooltip in the middle of the entire screen instead of the middle of the div. Is there any way I can prevent it from referring to the parent width and instead have it be 50% of its own width? I've added my code here and also in a jsfiddle
*{
margin: 0;
padding: 0;
border: none;
box-sizing: border-box;
text-decoration: none;
list-style: none;
}
body{
background-color:rgb(80,155,192);
}
header{
display: grid;
grid-template-columns: 25% 20% 5% 5% 20% 25%;
/* 1 2 3 4 5 6*/
justify-content: center;
align-items: center;
width: 100%;
background-color: white;
position: sticky;
top: 0;
z-index:1;
}
header h1{
grid-column: 1;
margin-left: 5%;
padding:10px;
font-size: 40px;
font-weight: 500;
color:rgb(80,155,192);
cursor: pointer;
transition: color 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}
header h1:hover{
color: black;
}
header h1 a:visited{
color:rgb(80,155,192);
}
.water-container{
grid-column: 3;
background:gray;
}
.water-container:before,
.water-container:after{
position: absolute;
bottom: -0.25rem;
left: 50%;
}
.water-container:before{
content: attr(title);
color:white;
padding:0.5rem;
border-radius: 0.3rem;
background: #333;
}
.water-icon{
display: block;
margin:auto;
width:3rem;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transform-origin: center;
}
.water-icon:hover{
transform: scale(1.2);
}
.fairy-container{
grid-column: 4;
}
.fairy-container:hover:after{
content: attr(data-tooltip);
}
.fairy-icon{
display: block;
margin:auto;
width:3rem;
transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
transform-origin: center;
}
.fairy-icon:hover{
transform: scale(1.2);
}
nav {
grid-column: 6;
}
.nav_links li{
display: inline-block;
margin-inline: 30px;
}
.nav_links li a{
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 15px;
width: 100px;
height: 40px;
border-radius: 50px;
background-color: rgb(80,155,192);
color: white;
transition: all 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.nav_links li a:hover{
background-color: rgb(60, 136, 173);
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<h1><a href="main.html">asdasd</a></h1>
<div class="water-container" title="water">
<img src="graphics/water.png" class="water-icon" alt="water icon">
</div>
<div class="fairy-container" data-tooltip="fairy">
<img src="graphics/fairy.png" class="fairy-icon" alt="fairy icon">
</div>
<nav>
<ul class="nav_links">
<li><a href="">Why?</a></li>
<li><a href="">Contact</a></li>
</ul>
</nav>
</header>
</body>
</html>Btw Im aware of the other issues in the code, I can fix them. I'm just confused about this one thing that I dont know how to fix. Thanks!
Aucun commentaire:
Enregistrer un commentaire