I was trying to make, when mouse go over the text "Hover over me", appear/disappear the text "Tooltip text" whit this code:
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
div .tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="wrapper">
<div class="header">
<div class="head">
<div class="nav">
<div class="tooltip"> Hover over me
</div>
</div>
<div class="test">
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
</div>
</div>
</body>
After a couple of attempts I came to the conclusion that it does not work because they are in two different <div>. So I was wondering if it was possible to make it work, Thanks.
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
div .tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
.tooltiptext {
visibility:hidden;
}
.tooltip:hover + .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="wrapper">
<div class="header">
<div class="head">
<div class="tooltip"> Hover over me
</div>
<div class="tooltiptext">Tooltip text</div>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to display a tooltip at my code page, I tried adding z-index at the css, but it did not work, i tried change the display to inline-block but still the same.
Here is my code:
.tooltip {
position: relative;
display: inline-block;
background-color: transparent;
border-width: 0px;
margin: 0px;
padding: 0px;
float: none;
z-index: 9999999
}
.tooltip .tooltiptext {
visibility: hidden;
width: 355px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="tooltip">
<i class="fa fa-info-circle"></i>
<span class="tooltiptext">Hello nice to meet u!</span>
</div>
</body>
The following images are what I can see from
You just need to work on the positioning, look at my example, i just added position:absolute and top and left property and it looks good to me, you can easily work with the dev-tools element inspector on this when you "force state hover"
.tooltip {
position: absolute;
display: inline-block;
background-color: transparent;
border-width: 0px;
margin: 0px;
top:40px;
left:40px;
padding: 0px;
float: none;
z-index: 9999999
}
.tooltip .tooltiptext {
visibility: hidden;
width: 355px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="tooltip">
<i class="fa fa-info-circle"></i>
<span class="tooltiptext">Hello nice to meet u!</span>
</div>
Change .tooltip .tooltiptext { bottom: 125%; } .
Snippet:
.tooltip {
position: relative;
display: inline-block;
background-color: transparent;
border-width: 0px;
margin: 0px;
padding: 0px;
float: none;
z-index: 9999999
}
.tooltip .tooltiptext {
visibility: hidden;
width: 355px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
/*bottom: 125%;*/
left: 50%;
opacity: 0;
transition: opacity 1s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="tooltip">
<i class="fa fa-info-circle"></i>
<span class="tooltiptext">Hello nice to meet u!</span>
</div>
I have a close button symbol which shows a top tooltip on hover pointing downwards. I have taken this example from https://www.w3schools.com/css/tryit.asp?filename=trycss_tooltip_arrow_bottom
<div id="middle">
<div class="posts">
<i class="fas fa-times fa-lg"><span class="tooltiptext">Exit</span></i>
</div>
</div>
CSS
.posts {
background:white;
border:1px solid #c0c0c0;
border-radius:4px;
padding:20px;
position:relative;
}
.posts a i.tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.posts a i.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.posts a:hover i.tooltiptext {
visibility: visible;
}
Tooltip is not showing.
Please add style to posts class
.posts{
position:relative;
margin:60px;
text-align:center;
}
.posts{
position:relative;
margin:60px;
text-align:center;
}
.posts a .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.posts a .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.posts a:hover .tooltiptext {
visibility: visible;
}
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<div id="middle">
<div class="posts">
<i class="fas fa-times fa-lg"><span class="tooltiptext">Exit</span></i>
</div>
</div>
i am trying to implement a tooltip like div using css.
i am refering
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_tooltip
above example shows a top tool tip.
can any one help me change this to bottom tool tip. I am very weak in CSS and design.
Here you go this could help you.
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: -40px;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 0px 10px 10px 10px;
border-style: solid;
border-color: #555 transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
<body style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here it is...
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</body>
</html>
Here is how you can do it with some changes in CSS.
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
bottom: -215%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip .tooltiptext::after {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(136, 183, 213, 0);
border-bottom-color: #555;
border-width: 6px;
margin-left: -6px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
<div style="text-align:center;">
<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>
<div class="tooltip">Hover over me
<span class="tooltiptext">Tooltip text</span>
</div>
</div>
Try this...!!!
<!DOCTYPE html>
<html>
<style>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px solid black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -60px;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
</style>
<body style="text-align:center;">
<div class="tooltip">Hover Me
<span class="tooltiptext">bottom tooltip</span>
</div>
</body>
</html>
How would I add a placeholder to this hover function for Firefox.
.hover {
width: 49px;
height: 20px;
margin-top: 200px;
position: absolute;
top: -200px;
left: 48%;
right: 50%;
opacity: .9;
z-index: 3;
}
<div class="hover"> <img src="http://static.tumblr.com/e2rgcy1/ma6od7pby/dropdown-button.png" /></div>
<style>
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width:100px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
/* Position the tooltip */
position: absolute;
z-index: 1;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html>
<body style="text-align:center;">
<div class="tooltip"><img src="http://static.tumblr.com/e2rgcy1/ma6od7pby/dropdown-button.png" />
<span class="tooltiptext">Facebook</span>
</div>
</body>
</html>
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -15px;
left: 110%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<h2>Right Tooltip w/ Left Arrow</h2>
<div class="tooltip">Hover over me
<ul class="tooltiptext">
<li>Tooltip text 1</li>
<li>Tooltip text 2</li>
<li>Tooltip text 3</li>
</ul>
</div>
Works perfectly with one Tooltip message, but not with multiple message.
It should always be vertically center regardless the no of tooltip messages.
Feel free to ask question if anyone didn't understand the scenario.
Instead of using margin values to adjust / place the toopltip.
Use top:50% and a transform to vertically center by dragging it back up 50% of its own height.
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
margin-top: 50px;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: 50%;
transform: translateY(-50%);
left: 120%;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 100%;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<div class="tooltip">Hover over me
<ul class="tooltiptext">
<li>Tooltip text 1</li>
<li>Tooltip text 2</li>
<li>Tooltip text 3</li>
</ul>
</div>
<br/>
<div class="tooltip">Hover over me
<ul class="tooltiptext">
<li>Tooltip text 1</li>
</ul>
</div>