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>
Related
I am trying to create a tooltip when I hover over text. I tried following this tutorial by W3 Schools. Whenever I try hover over the text that is supposed to display the tooltip on hover, nothing happens. I've tried to copy-paste W3 Schools' code and it works perfectly.
I've tried centering the text and adding top margins in case the tooltip was off-screen, however that did not fix it.
Any help would be very much appreciated.
CSS:
#upgradeOne {
display: flex;
justify-content: center;
margin-top: 50px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip::hover .tooltiptext {
visibility: visible;
}
HTML:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<div class="upgradeDimensions mouse-hand tooltip" id="upgradeOne" onclick="upgradeOneClick()">
text
<span class="tooltiptext">
tooltip text
</span>
</div>
</div>
</body>
</html>
Only need one : when using :hover Next step would be changing the positioning of the tooltip text. The first step on that would be to remove the left: 50%; on your .tooltip .tooltiptext CSS.
#upgradeOne {
display: flex;
justify-content: center;
margin-top: 50px;
}
.tooltip {
position: relative;
display: inline-block;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: relative;
z-index: 1;
bottom: 150%;
left: 50%;
margin-left: -60px;
}
.tooltip .tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: black transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>
<div class="upgradeDimensions mouse-hand tooltip" id="upgradeOne" onclick="upgradeOneClick()">
text
<span class="tooltiptext">
tooltip text
</span>
</div>
</div>
</body>
</html>
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 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>
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>
So, I have gallery that contains some photos. I want to make when the image hovered then some information of the person is shows up, the name of person and the their role.
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
color: white;
width: 100%;
height: 0;
transition: .5s ease;
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> HIS JOB </div>
</div>
</div>
I used overlay to make the info shows up, but why the text is not in order and its not on the photo? I want its in the middle bottom on the photo. any suggestion? thanks before.
below is updated snippet
.gallery {
position: relative;
padding: 6px 6px;
float: left;
width: 24.99999%;
}
.flag {
border: 1px solid #ccc;
padding: 5px;
position:relative;
}
.flag img {
display: block;
width: 100%;
height: auto;
}
.biodata {
position: absolute;
bottom: 5px;
left: 5px;
right: 0;
overflow: hidden;
color: white;
width: calc(100% - 10px) ;
height: 0;
transition: .5s ease;
display:block;
background:rgba(0,0,0,0.5);
}
.flag:hover .biodata{
height:calc(100% - 10px);
}
<div class="gallery">
<div class="flag">
<img src="https://placeholdit.imgix.net/~text?txtsize=28&txt=300%C3%97300&w=300&h=300">
<div class="biodata"> HIS NAME<br/> President of INASGOC </div>
</div>
</div>
See this fiddle
CSS
.biodata {
z-index:100;
}
.flag:hover .biodata {
height:100%
}
Use this Code:
<!DOCTYPE html>
<html>
<head>
<style>
.container {
position: relative;
width: 50%;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
bottom: 100%;
left: 0;
right: 0;
background-color: #008CBA;
overflow: hidden;
width: 100%;
height:0;
transition: .5s ease;
}
.container:hover .overlay {
bottom: 0;
height: 100%;
}
.text {
white-space: nowrap;
color: white;
font-size: 20px;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/Shaki_Waterfall2.jpg" alt="Avatar" class="image">
<div class="overlay">
<div class="text">
<p style="padding:20px;">I am Mr. Alven</p>
</div>
</div>
</div>
</body>
</html>