i have a situation when some div i hover on calls tooltip. And I have re-positioning logic in case tooltip does not fit the screen. But i faced a problem (epecially in FireFox) that when tooltip travels over "caller" div, "caller" div looses its hover state. This is 100% reproducible in FF, in Chrome works on some machines and on some does not.
Is there any solution for this?
I have creatted jsfiddle to show this. You will see that animation gets canceled - and yes i can do some workaround in such a simple case but reall situation is much more complex.
jsfiddle.net/5c1fdw6o/9/
You may apply CSS: pointer-events: none; to the top layer, for that.
In your case:
.sliding-tooltip {
pointer-events: none;
}
I would recommend switching html divs so the span would be above the other div.
<div class="container">
<div class="sliding-tooltip">
I slide to the right
</div>
<span class="hover-item">Hover me!</span>
</div>
If this isn't enough you could use z-index on both elements to make sure div is always on top of the other. But make sure to position the span as relative.
.hover-item {
color: blue;
position: relative;
z-index: 10;
}
Related
I am trying to build a guide functionality for my application. As a part of this functionality, it is expected that a tooltip is shown next to the target HTML element and this target element is brought on top of modal backdrop that appears together with the tooltip.
The problem is that after significant effort I still cannot make HTML element show on top of the modal backdrop. Simple tricks like z-index: 10000 !important; position: relative do not help. Also changing parent elements' z-index by disabling it in Firefox Developer Tools (and leaving z-index: 10000 !important; position: relative for the target element that is supposed to be on top of the modal backdrop) does not help.
HTML of the application is quite complex with many elements. But I want to be able to "highlight" any given element by bringing it on top of the modal overlay knowing only its id. Is there an easy way to do that with JavaScript/React?
Hopefully there is a way to do this without modifying the DOM, which would be highly preferable.
UPD: Code demo - press hat button to show guide/tooltips
Remove the z-index from .form-wrapper and apply relative position with z-index for the targetted elements.
I did this by adding
d.classList.add("tooltip-active-element");
to App.js#77
Also added the class to the css file:
.tooltip-active-element {
position: relative;
z-index: 2;
background: red;
}
and removed the z-index value from other classes, the key one being the .form-wrapper class.
Working demo: https://codesandbox.io/s/tooltip-z-index-forked-fg9pt
Using bootstrap 3 I've got two columns (sm-3 and sm-9). The left column is position: fixed and contains a link with a tooltip. The z-index of the tooltip (without being specified) seems to be browser specific.
What is (in general) the best way to define the z-index of the tooltip? I'm looking for a clean solution that works in all common browsers.
FIDDLE
Internet Explorer 11 (left) Chrome 48 / Edge 25 (right)
HTML:
<div class="container">
<div class="col-sm-3" id="left">
<a id="tooltipButton" href="#" data-toggle="tooltip" title='Long Text'>Show Tooltip</a>
</div>
<div class="col-sm-9 col-sm-offset-3" id="right">
Content
</div>
</div>
CSS:
#left { position: fixed; }
#right { background-color: #ddd; }
JS:
$('#tooltipButton').tooltip({
trigger: 'click',
html: true,
placement: 'right',
});
A few things I've tried (CSS):
.tooltip { z-index: 10; } // Doesn't work
.tooltip .tooltip.in { z-index: 10; } // Doesn't work
.tooltip .tooltip-inner { z-index: 10; } // Doesn't work
Is there a clean solution without adding more divs and without changing the attributes of the left or right div? E.g. #left { z-index: 10; } seems to work but changes the attributes and the overlapping behavior of the left div.
FIDDLE
If you give an element a position other than static it forces it to appear above any element that is still static. It's a rather unknown behavior of z-index. Therefore if a parent element has a position other than static all it's children will have their own stacking scope. It works almost like layers.
This article has an amazing write up about it: What no-one told you about z-index
So in your example all the tooptip code is appearing in the container that has it's own stacking scope and is therefore forced under the next container. If you add z-index:999; to the #left container you will see it is fixed. This is because that container (and it's contents) are now forced higher than the next.
JSFIDDLE
The other thing you could do is remove position:relative from the #right container so it doesn't have it's own stacking scope and then it works again.
JSFIDDLE v2
I don't think this helps much with your problem as I don't think you can hack you way out of it. It is much more common practice that tooltip code is injected into the bottom of the page so that it naturally stacks above everything else.
I am facing an issue with a div not being displayed when it is toggled from display: none; to display: block;
HTML:
<div class="menus-container" style="display: block; top: 50px; height: 277px;">
.. some pretent content, which shows up in another place on the website ...
</div>
Which is toggled by js by a plugin JS which is minified so I cannot list the js, but I see in the developer toolbar that the style changes work.
I see that it has a height, I see that it has a width and a z-index of about 99999.To be sure I assigned in the developer tool bars all parent elements as well an z-index: 999 !important;
Still that div wont show up... any ideas? If you want to look at the example follow this link (redacted) - it only happens at a width of less than 850px.
The problem here isn't a z-index issue, it's that the menu is appearing outside of its parent, the header element, which has overflow set to hidden. Setting the overflow to visible reveals the menu. You'll want to do some other things too, like give the menu a solid background color so it's easier to read.
<header class="main-header collapsed-gallery-page-menu" style="overflow: visible;">
I have a list of <li>'s and a icon next to it which on hover shows an overlay with the information about the 'test'. something like below:
test1
test2
test3
and so on....
html:
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
js:
$('span.account-info-icon').on("mouseenter", function(event){
$("#hover-container").show();
}).on("mouseout", function(){
$("#hover-container").hide();
});
The above code works fine to show/hide the div container on hover. However I'm having issues with the positioning of the overlay. im using css to position the overlay, as a result of which, the overlay is always positioned below irrespective of which ever icon i hover.
in short because im hard coding the values of the <div> conatiner the overlay always shows at one place and does not move as per the hover over the icons.
Below is the css im using to position the overlay.
CSS:
#hover-container{
display: none;
position: relative;
top: -750px;
left: 943px;
padding: 2px 0 0 9px;
}
Basically what i m trying is to allign the overlay per the flow of the hover. so when i hover over , say: 'test1' icon, the overlay should display next to it. I'm not sure if this is achievable via CSS or Js.
Any ideas appreciated!!!!
Thanks in advance!
To simplify this exercise, become familiar with two css position values: "position:relative" and "position:absolute". Also, proper container arrangement will help you get favorable results.
On the premise that #hover-container just happens to generically refer to a non-replicated ID property in your html, it can have this css definition:
#hover-container{
display:none;
position:absolute;
padding: 2px 0px 0px 9px;
left:100px;
}
Each instance of your span should then be in a wrapper container to help guide the hover to appear exactly where you want it:
.info-row-wrapper {
position:relative;
}
Pulling all of these together, you have:
<div class="info-row-wrapper">
<span class="account-info-icon"></span> // icon is the build using image sprites
<div id ="hover-container>
//details about the 'test1','test2'..so on
</div>
</div>
Here, the wrapper container gives a shell that the absolute positioned element appears inside of. The absolute positioned element respects the position of the parent html container that is explicitly positioned relative (if not already assigned a css position attribute)
please refer to the fiddle - http://jsfiddle.net/L33jo3j7/4/
Pretty much $el.hover() solves the thing.
and let me know if you have any doubts.
This looks better-
http://jsfiddle.net/L33jo3j7/4/
I have a position: fixed div besides a div with long text inside a div with overflow: scroll. I want the text to scroll even if my cursor is hovering over the fixed div (which is the normal behavior when the window would be the scrolling element).
I made a fiddle: http://jsfiddle.net/jM2Eh/1/
I basically want the text to scroll while scrolling hovering over the red box.
UPDATE: I am using Twitter bootstrap in this particular case and updated the fiddle accordingly.
If JavaScript is needed for that, that would also be ok.
UPDATE2: I also tried this solution, but that causes weird flickering effects:
http://jsfiddle.net/jM2Eh/16/
Have you tried using padding-left on your text node instead of using two columns?
http://jsfiddle.net/j5BLm/15/
.text {
padding-left: 50%;
}
Another possible solution is to use pointer-events: none if you don't care about IE:
http://jsfiddle.net/codedigger/jM2Eh/18