Custom Tooltip for input text - 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>

Related

Tooltip icon not showing at all using CSS

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>

Custom tooltip doesn't work on fontawesome icon

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>

CSS hover function between two different divs

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>

Autoresize css tooltip

i have this css tootlip code:
a.tooltips {
position: relative;
display: inline;
}
a.tooltips span {
position: absolute;
width:140px;
color: #FFFFFF;
background: #000000;
height: 30px;
line-height: 30px;
text-align: center;
visibility: hidden;
border-radius: 6px;
}
a.tooltips span:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -8px;
width: 0; height: 0;
border-top: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
a:hover.tooltips span {
visibility: visible;
opacity: 0.8;
bottom: 30px;
left: 50%;
margin-left: -76px;
z-index: 999;
}
I want it to auto resize based on the text lenght. (long or short)..how i can do it? Thank you.

Get rid of; width:140px; from the class a.tooltips span

Adding placeholder to hover

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>