I'm having some trouble making my tooltip position center in mobile devices. It gets cut and end up in different places, depending on where the tooltip-icon is.
I wrote "position: center" which is obviously not working.
Please help me. :)
.tooltip {
position: relative;
display: inline-block;
border-bottom: none;
color: #516A66;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 400px !important;
background-color: #516A66;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 20px;
position: absolute;
z-index: 1;
top: 100%;
left: 50%;
margin-left: -200px;
opacity: 0;
transition: opacity 1s;
}
#media only screen and (max-width: 767px){
.tooltip .tooltiptext {
position: center;
width: 200px !important;
}}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.tooltip .tooltiptext::after {
content: " ";
position: absolute;
bottom: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent transparent #516A66 transparent
}
.tooltip:hover .tooltiptext {
visibility: visible;
}
Related
I designed a blue button with a white text on it, but the blue effect on the button prevents the white text and destroys the text. How can I complete the text without destroying the effect?
.button {
position: relative;
top: -250px;
left: 200px;
display: inline-block;
text-decoration: none;
text-transform: uppercase;
color: #fff;
outline: 2px solid #0059f3;
padding: 30px 60px;
overflow: hidden;
transition: color 1s;
}
.button:hover {
color: #0059f3;
}
.button::before {
content: '';
position: absolute;
top: 0;
left: -50px;
z-index: 0;
width: 150%;
height: 100%;
background-color: #0059f3;
transform: scaleX(0) skewX(35deg);
transform-origin: left;
transition: transform 1s;
}
.button:hover::before {
transform: scaleX(1) skewX(35deg);
}
I'm using flex to position some divs around. When I try using a tooltip inside one of the divs that has overflow-y: auto, the tooltip text causes the div to overflow even while invisible, and is clipped when visible.
This is so when the tooltip text has position: relative.
If not, then it is not clipped, and it doesn't cause the div to overflow... but it is not positioned at the right place!
Any ideas how to make it be on the right place, and not be clipped? I have seen a couple of answers here that seem related, but didn't manage to fix my problem based on them.
Here's a very simple code that displays the problem
.container {
display: flex;
flex-direction: row;
width: 140px;
height: 55px;
/* the following style clips the tooltiptext (if it has position relative) */
overflow-y: auto;
background-color: aqua;
/* to help see the overflow behaviour */
}
.container div {
flex: 1;
}
.tooltip {
width: 3em;
height: 1em;
background-color: yellow;
position: relative; /* comment this out to fix clipping */
}
.tooltip .tooltiptext {
width: 6em;
height: 2em;
position: absolute;
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
/* The following is only good if position is relative */
/* bottom: 125%; */
/* left: 50%; */
/* margin-left: -60px; */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.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;
}
<html>
<head>
</head>
<body>
<div class="container">
<div>867-5309</div>
<div class="tooltip">
Busy
<!-- If the position of the tooltiptext span is relative
it causes the div to overflow - even when hidden,
and the tooltiptext is clipped -->
<span class="tooltiptext">When calling on Jan 2000</span>
</div>
</div>
</body>
</html>
Add display: contents; on your tooltip.
.container {
display: flex;
flex-direction: row;
width: 140px;
height: 55px;
/* the following style clips the tooltiptext (if it has position relative) */
overflow-y: auto;
background-color: aqua;
/* to help see the overflow behaviour */
}
.container div {
flex: 1;
}
.tooltip {
display: contents;
width: 3em;
height: 1em;
background-color: yellow;
position: relative;
/* comment this out to fix clipping */
}
.tooltip .tooltiptext {
width: 6em;
height: 2em;
position: absolute;
visibility: hidden;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
z-index: 1;
/* The following is only good if position is relative */
/* bottom: 125%; */
/* left: 50%; */
/* margin-left: -60px; */
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
.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;
}
<html>
<head>
</head>
<body>
<div class="container">
<div>867-5309</div>
<div class="tooltip">
Busy
<!-- If the position of the tooltiptext span is relative
it causes the div to overflow - even when hidden,
and the tooltiptext is clipped -->
<span class="tooltiptext">When calling on Jan 2000<https://stackoverflow.com/questions/71229271/overflow-clips-tooltip#/span>
</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>
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
I want to create a tooltip (using css) that appears once the user moves the mouse over an element. I made it work for text, but I have problems making it work for an image.
.container {
position: relative;
width: 15%;
}
.image {
position: relative;
display: inline-block;
width: 100%;
height: auto;
}
.image .tooltiptext2 {
visibility: hidden;
width: 150%;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -8px;
left: 110%;
font-size: 150%;
font-family: Arial;
/* Fade in tooltip - takes 1 second to go from 0% to 100% opac: */
opacity: 0;
transition: opacity 1s;
}
.image .tooltiptext2::after {
content: "";
position: absolute;
top: 50%;
right: 100%;
margin-top: -5px;
border-width: 5px;
border-style: solid;
border-color: transparent black transparent transparent;
}
.image:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}
You can see what I did in this link:
https://jsfiddle.net/Ruloco/q3e4psh3/
I'll apreciate any help you could give me. Thanks in advance!!
.tooltiptext2 is not a child of .image. Using .image + .tooltiptext2 instead of .image .tooltiptext2 makes the tooltip work.
https://jsfiddle.net/8Lmz2oLj/
The tooltip isn't a child of the image. You need to amend your styles so that the image container is the thing you're listening for a hover on.
.container:hover .tooltiptext2 {
visibility: visible;
opacity: 1;
}
https://jsfiddle.net/q3e4psh3/1/