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>
Related
Is there a way to make a text content popup box appear when mouse hovers some HTML element?
I need the overlay to fit its content, because the way it is now is cropping the text, it's getting the height of the HTML element and not the height of its content.
It only slides left, but that's okay with me. I am going to place the html element to the right of the page later on, but I need to be able to set a margin from the starting point of the popup, because it slides just next the HTML element, I'd like some space between.
This is what I have got so far:
.container {
position: absolute;
width: 40%;
}
.overlay {
position: absolute;
bottom: 0;
right: 100%;
background-color: #008CBA;
overflow: hidden;
width: 0;
height: 100%;
transition: 0.5s ease;
}
.overlay:hover {
display: none;
}
.container:hover .overlay {
width: 100%;
right: 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%);
}
<div class="container">
My Text
<div class="overlay">
<div class="text">Hello World</div>
</div>
</div>
How can I do that?
See if that's what you're wondering to happen :
#container {
width: 100%;
height: auto;
text-align: center;
margin: 0 auto;
}
.link {
position: relative;
display: inline-block;
}
.link .tip {
visibility: hidden;
width: 0;
height: 100px;
opacity: 0;
background-color: #008CBA;
color: #fff;
text-align: center;
padding: 5px 0;
position: absolute;
z-index: 1;
top: -5px;
right: 105%;
transition: 0.5s ease;
overflow: hidden;
margin-right: 20px;
}
.link:hover .tip {
visibility: visible;
width: 150px;
height: auto;
opacity: 1;
}
<div id="container">
<div class="link">Hover me now !
<span class="tip">
Some few text here<br><br>
Let's try something else<br><br>
And adding more info here too<br><br>
And even a bit more here also
</span>
</div>
</div>
I want to remove the first line from the CSS timeline I created, I just want the timeline circle to show up first not to have a line before it. I also want to style each dot different color, how can I do both these?
I have tried to add a class to one of the timeline containers called .not_complete but it doesnt change the color of the circle of the timeline.
/* The actual timeline (the vertical ruler) */
.timelinex {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 5em;
}
/* The actual timeline (the vertical ruler) */
.timelinex:before {
content: '';
position: absolute;
width: 0px;
background-color: #fff;
top: auto;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timelinex::after {
content: '';
position: absolute;
width: 4px;
background-color: #e3e3e3;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.containerx {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.containerx::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
right: -5px;
background-color: #e3e3e3;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.containerx::after .not_complete {
background-color: #e3e3e3 !important;
}
/* Place the container to the left */
.leftx {
left: 0;
}
/* Place the container to the right */
.rightx {
left: 50%;
}
/* Fix the circle for containers on the right side */
.rightx::after {
left: -7px;
}
/* The actual content */
.contentx {
padding: 2px 3px;
position: relative;
border-radius: 6px;
}
<div class="timelinex">
<div class="containerx leftx not_complete">
<div class="contentx">
<p>
<img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px">
</p>
<h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5>
<div> Test Timeline Step 1</div>
</div>
</div>
</div>
The selector here is invalid:
.containerx::after .not_complete {
It would select the child of the ::after pseudo element. You need to use:
.containerx.not_complete::after {
The above selector selects any element's ::after pseudo element, with the classes containerx and not_complete. So kindly replace your code with:
.containerx.not_complete::after {
background-color: #e3e3e3 !important;
}
Hope this solves your issue.
Complete Snippet
/* The actual timeline (the vertical ruler) */
.timelinex {
position: relative;
max-width: 1200px;
margin: 0 auto;
padding-bottom: 5em;
}
/* The actual timeline (the vertical ruler) */
.timelinex:before {
content: '';
position: absolute;
width: 0px;
background-color: #fff;
top: auto;
bottom: 0;
left: 50%;
margin-left: -3px;
}
.timelinex::after {
content: '';
position: absolute;
width: 4px;
background-color: #e3e3e3;
top: 0;
bottom: 0;
left: 50%;
margin-left: -3px;
}
/* Container around content */
.containerx {
padding: 10px 40px;
position: relative;
background-color: inherit;
width: 50%;
}
/* The circles on the timeline */
.containerx::after {
content: '';
position: absolute;
width: 12px;
height: 12px;
right: -5px;
background-color: #e3e3e3;
top: 15px;
border-radius: 50%;
z-index: 1;
}
.containerx.not_complete::after {
background-color: #e3e3e3 !important;
}
/* Place the container to the left */
.leftx {
left: 0;
}
/* Place the container to the right */
.rightx {
left: 50%;
}
/* Fix the circle for containers on the right side */
.rightx::after {
left: -7px;
}
/* The actual content */
.contentx {
padding: 2px 3px;
position: relative;
border-radius: 6px;
}
<div class="timelinex" >
<div class="containerx leftx not_complete">
<div class="contentx">
<p><img src="assets/img/therapist1.jpg" style="border-radius: 0.5em;border-top-left-radius: 120px; border-bottom-right-radius: 120px"></p>
<h5 style="color:#999;font-style: 0.5em"> DAY 1 </h5>
<div> Test Timeline Step 1</div>
</div>
</div>
</div>
Update: For Even / Odd Styling and First Child.
To create odd and even styling, you need to use :nth-child() selector. An example of having it blue and red is here:
li {
display: block;
width: 200px;
padding: 10px;
color: #fff;
}
li:nth-child(odd) {
background: #00f;
}
li:nth-child(even) {
background: #f00;
}
li:first-child {
background: #000;
font-weight: bold;
}
<ul>
<li>First Child</li>
<li>Even</li>
<li>Odd</li>
<li>Even</li>
<li>Odd</li>
</ul>
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/
I have a div (fixed) which acts like a pop up:
<body>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
</body>
This css allows the container to be horizontally centered (having a 100% width makes everything behind it unclickable; thus, I set it to 1px):
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
width: 1px;
z-index: 9999;
}
.popup-item {
display: block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
However, I am unable to center .popup-item due to the parent element .popup-container being smaller than its child. How do I center .popup-item while still being able to click it (pointer-events: none entirely disabled it)?
Vote to Close almost has it, but with the 1px width, the element doesn't get centered.
Do this instead:
.popup-container {
position: fixed;
left: 0;
right: 0;
z-index: 9999;
text-align:center;
height:0px;
}
.popup-item {
display: inline-block;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
This will make it centered, because the container is 100% wide. However, pointer-events:none; will allow you to click through to anything below it.
A couple of solutions.
First, you can make the child of the container centered using translateX() transform: http://jsfiddle.net/Yjz5R/. The same effect can be accomplished using negative margins, but the width for the container's child has to be set: http://jsfiddle.net/9Qmza/.
CSS:
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
}
Or second, you can make the container "immune" to click events:
Markup:
<input type = "checkbox" id = "clickToggle" />
<label for = "clickToggle">Click me</label>
<div class="popup-container">
<div class="popup-item">
Yolowing
</div>
</div>
Styles: http://jsfiddle.net/CVfHt/.
.popup-container {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background-color: rgba(200, 200, 200, 0.5);
pointer-events: none;
}
.popup-item {
position: absolute;
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
pointer-events: all;
}
input[type = "checkbox"] {
display: none;
}
input[type = "checkbox"] + label {
cursor: pointer;
}
input[type = "checkbox"]:checked ~ div {
display: none;
}
Lastly, a question/comment. If you do not want the container to be visible, then why use it at all? Just keep the markup of the child and get rid of the container: http://jsfiddle.net/yvc4E/.
.popup-container {
position: fixed;
left: 0;
right: 0;
margin-left: auto; /* remove this line - unnecessary*/
margin-right: auto; /* and this line, remove */
width: 1px;
z-index: 9999;
text-align: center; /* add this */
}
.popup-item {
display: inline-block; /* change to inline-block */
min-width: 20px;
padding: 25px 50px;
background-color: yellow;
}
I have a few thumbnail images that on hover have a multi colored hover styling (looks like this, the yellow thumbnail is what it looks like when you hover over it)
The only problem is that I can't get the text inside to align vertically in the middle of the thumbnail without breaking something else. When I change .thumb to display: table; and .align-mid to display: table-cell; with vertical-align: middle; the text aligns to the middle but the background color becomes opaque. Looks like this:
I can't seem to figure out how to accomplish this.
HTML:
<div class="thumb" onclick="location.href='{{ cms:page:thumb_one.link:string }}'">
{{ cms:page_file:thumb_one.image:image}}
<div class="align-mid">
{{ cms:page:thumb_one.text:string }}<br>
{{ cms:page:thumb_one.description:string }}
</div>
<div class="yellow">
</div>
</div>
CSS:
.thumb {
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
display:inline-block;
position: relative;
height: 170px;
width: 235px;
overflow: hidden;
}
.thumb:after {
background: rgba(255,255,255,.7);
content:'';
display: block;
height: 170px;
left: 0;
opacity: 0;
padding: 20px;
position: absolute;
top: 0;
width: 100%;
z-index: 1;
}
.thumb:hover:after {
opacity: 1;
padding: 20px;
transition: opacity .4s;
}
.thumb:hover > .align-mid {
background-color: transparent;
color: white;
}
.thumb:hover {
cursor: pointer;
}
.thumb img {
height: 100%;
width: 100%;
}
.yellow {
opacity: 0;
}
.thumb:hover .yellow {
background: rgba(255,213,43,.8);
content:'';
display: block;
left: 13px;
right: 13px;
bottom: 13px;
top: 13px;
opacity: 1;
position: absolute;
transition: opacity .4s;
z-index: 2;
}
.align-mid {
background-color: rgba(0,0,0,.5);
color: rgb(255,213,43);
height: auto;
padding-top: 10px;
padding-bottom: 10px;
position: relative;
top: -105px;
width: 100%;
z-index: 3;
}
It is obvious that when your wrapper have more than a child , and all children are viewed as table cells , in case you dont want them stacked vertically ( y-axis) , you have to assign absolute positioning to each , this way they gonna be stacked on top of each other ( z-axis)
so a simple solution will be:
.thumb img { height: 100%; width: 100%; position:absolute; }