I really like this solution for CSS tooltips and have used a version of it myself for a while. But I just came across an issue with it that I hadn't encountered before with the content of multiple tooltips overlapping each other and I'm not sure how best to solve it.
The solution mentioned is based on managing the opacity of absolutely positioned tooltip content. Clean, elegant, and doesn't need JavaScript.
In my case, I need the tooltips for data shown in a table, so the HTML looks something like this:
<td class="tooltipContainer">Tooltip container text
<div class="tooltip">
Contents of tooltip, can include HTML
</div>
</td>
The CSS includes:
.tooltipContainer {
position: relative;
}
.tooltip {
position: absolute;
[...other stuff...]
opacity: 0;
transition: opacity .8s;
}
.tooltipContainer:hover .tooltip {
opacity: .95;
}
But in order to hide the tooltip once the mouse leaves the tooltip container (otherwise you get strange behaviour with tooltips showing up without hovering over the container), you need another rule to hide the tooltip when hovering over it, so I used this:
.tooltipContainer .tooltip:hover {
opacity: 0;
}
The problem is when you have a tooltip that is below another tooltip, i.e. its contents stay hidden when hovering over the container because you're also hovering over the hidden tooltip from above.
Here's a JSFiddle demonstrating the problem: http://jsfiddle.net/k1wbnbn4/
As you can see, the top and bottom rows work as expected, but the tooltip containers for the second row are covered by the tooltips for the first row, so they stay hidden.
And here's another fiddle with that last rule excluded: http://jsfiddle.net/8ufzrt71/1/ (just to demonstrate why I think it is needed).
I've tried strange things, like a :not rule to get the tooltips to always show when hovering over the container, whether covered by another tooltip or not, but always hide when hovering over the tooltip contents. But I'm stuck and can't seem to get it to work the way I want.
How do I get the tooltips to show when and only when hovering over their containers without straying too far from the basic principle for these CSS tooltips?
Ok, so I've been looking for other ways to tackle this than just getting the CSS selectors right to do what I'm after, and, looking at toggling display instead of opacity, came across this answer, which got me onto the idea of setting/toggling visibility as well as opacity. So to show the tooltip, essentially I set:
opacity: 1;
visibility: visible;
And to hide it:
opacity: 0;
visibility: hidden;
This finally gets my tooltips to behave as they should even when a container is covered by a hidden tooltip from above, because if it's not visible, it can't trigger the hover (which it can trigger when it's just completely transparent). Here's the forked fiddle:
http://jsfiddle.net/4k90opzv/1/
Related
I'm trying to write myself a little Stylish style for one page, for easier reading.
The page in question is https://satisfactory.fandom.com/wiki/Hard_Drive.
What I want to achieve is to the top row of this table (with "alternate name", "product" and so on)
to behave similar to the top wikia navbar - I want it to be on it's place, until it's been scrolled past down, then to stay at the top - sort of as freezing a row in a spreadsheet.
The position: sticky; should do what I want, but nothing changes. I've tried with background-color to see if I'm targeting the proper element, and the background color changed.
Here's how I'm trying to do it
table#alternateRecipesTable th {
position:sticky!important;
top: 0px!important;
}
I'm using firefox 100 with stylus 1.5.21.
Thank you.
Your plan to set the position: sticky CSS property is correct. However, to work this as expected, there can't be a parent element with overflow: hidden.
If you set the position: sticky to your head cells of the table, you also need to check every parent element and unset the overflow: hidden property, otherwise it will not work.
I have a solution where I have to pop up a custom modal message box for my site. When the modal popup is shown, I have to set color and opacity to the complete page so that the modal popup sticks out.
I inject the below css class to the body tag to do this.
.fade_background
{
background-color: black;
opacity: 0.65;
}
It works for all elements in the page except for the elements which has a fixed position/absolute. I know that the fixed position element has the viewport as parent.
Any idea how can I target fixed position elements too.
Without viewing all elements, it is kind of hard to solve. But in basic lines, I would try to make certain that the elements are as absolute position with z-index below the overlay to highlight the modal window. It would be interesting that you publish the html and css, so I easily solve the issue.
Check to make sure that the fixed and absolute positions have the same class as the rest of them. Also try and check to see if there are any other css styles that are overwriting .fade_background
JsFiddle
HTML
<p>im a duck</p>
CSS
p:hover {
display:none;
}
Shouldn't it disappear after hovering?
It does disappear.
However, after it disappears, it's no longer hovered, so it re-appears.
Each time you move the mouse, the cycle repeats; if you move the mouse over it, you'll see it flickering.
The exact behavior depends on the browser; in particular, Chrome only recalculates hover states on mouse events.
this will make more sense to you.
html:
<div class="cont"><p>foo</p></div>
css:
.cont{width:100%;height:30px;}
.cont p{}
.cont:hover p{display:none}
hope that helped.
A simple alternative would be to do something like this:
p:hover {
opacity: 0;
}
However, that will only work while the hovering it happening. It's won't hide the element once hovering has ceased.
With display: none you're completely removing the element from visibility, including height and width. So when you hover it, you completely remove it thus resulting in not hovering, then it reappears. It's a pretty interesting cycle.
You may want to look into visbility or trying to set it within a container that doesn't get hidden so you have some sort of hoverable object at all times.
It will be working, but note that once the element goes display: none, you can't hover it anymore, because there's nothing to display. So it goes unhovered, which then allows the rule to apply again, so essentially you're flickering between hovered and un-hovered VERY quickly, essentially making it look like nothing's happening.
display:none
Will hide the element on hover, thus the element is no longer hovered over, so it reappears.
visibility:hidden;
Will set the element to invisible, however under the visibility state the element is no longer listening to the hover event and so will reappear, similar to display:none
Technically, you could do this on hover to get the desired effect
opacity:0;
and the element will remain hidden whilst you are hovering over it. This is due to the element still listening for events as opacity doesn't affect this.
Here's a fiddle comparing the 3
http://jsfiddle.net/mEVHp/1/
You can use javascript to do this job
$('p').hover(function(){
$(this).hide();
});
see this fiddle for more info.
I am having issues with my navigation bar CSS.
I want it to look like :
http://i39.tinypic.com/28is4uw.png
But this is what I'm getting:
http://i40.tinypic.com/akecl5.png
The only way for me to make it work like that is by using:
.under-menu { position: relative; z-index:999; }
but this kills the submenu links.
Thanks a lot!
Not a perfect solution, but at least some if we want to support IE, if not just adding
pointer-events: none;
Will fix the problem. This demo doesn't include pointer-events.
Here is a demo:
CSSDesk
In summary, I added the wave background inside the dropdown (in the li where the link and the drop ul is), and the effect is almost the same with your second try, with the only differents that I mask the top part of the drop down with the background that I added in the LI.
You will see that the wave background shadow becomes ticker, since the other background is still there (you can hide it with JS then it will become better, but since this is only a html/css topic I dind't add any JS )
So when you hover on the LI element the overlay background shows.
So that overlay background should be added for each li with drop-down. (like I said not a perfect solution)
I've been designing a new theme out of boredom and found an idea I really liked. It uses the :before and :after pseudo-elements to put two images on top of the menu bar, to make it loo like some animals are walking/hanging on it.
The problem I'm having with this is the fact that these elements then make the button parts underneath unclickable. There are several pixels at the top where, even though not directly under an animal, can't be clicked. The logo, which is meant to sit behind the image at the left, can only be clicked at the top above where the generated block is.
If you're confused, see the jsFiddle. In this example, the logo isn't present so you can see that link behind it is completely unclickable without tabbing.
Is there any workaround/hack that can make the image still appear on top of all the content, but still allow the links below it to be clicked through the image? Perhaps an alternate way of adding the images on top so at least the space in between them is clickable?
Original Answer
Well, its not fully cross browser yet, but pointer-events: none on those pseudo-elements is probably what you really seek. Here's the fiddle.
Secondary Answer (perhaps more cross browser)
Taking some inspiration from Jimmie Lin's idea, but keeping it all semantic, if you make sure the stacking context remains unchanged for all the elements, then for every a you need "pushed forward" set something like this (see fiddle):
.pushForward {position: relative;}
.pushForward:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
}
One approach (this is extremely hacky, but theoretically should work) is that you should add a <div> with higher z-index than the animal icons, then set it to have an opacity of 0. I am not sure whether setting opacity to 0 will hide the element (it shouldn't), but once you create this <div>, copy-paste all of your links that are affected by your icons there.
Theoretically, this transparent DIV would effectively replicate the links again and catch all the click events that are supposed to go on the icons.
Try it out, maybe it works - just a hacky idea.