I have a range slider in jquery with tooltip above handles, and my issue is with z-index position of tooltips...
I wanna to set them up in way that one which I'm dragging along slider gets above that one which is not dragged.
Currently, the first tooltip is behind last tooltip and I don't know how to set it up to work in above way...
You can see my situation in jsfiddle: /
jQuery:
$(function() {
$( ".slider-assets" ).slider({
range: true,
min: 100,
max: 500,
values: [ 200, 300 ],
slide: function( event, ui ) {
$( ".amount-assets" ).val( ui.values[ 0 ] + "k € - " + ui.values[ 1 ] + "k €");
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + "k €" + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + "k €" + '</div></div>');
}
});
$( ".amount-assets" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k € - " + $( ".slider-assets" ).slider( "values", 1 ) + "k €" );
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 0) + "k €" + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 1) + "k €" + '</div></div>');
});
HTML:
<br/>
<br/>
<div class="slider-assets"></div>
<br/>
<input type="text" class="amount-assets" />
CSS:
.amount-assets1,.amount-assets2{
width: 48px;
}
.tooltip {
position: absolute;
z-index: 1020;
display: block;
padding: 5px;
font-size: 11px;
visibility: visible;
margin-top: -2px;
bottom:120%;
margin-left: -2em;
}
.tooltip .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid #000000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I'm not sure if this is css or jquery question of issue, I've tried to increase z-index but it was not working.
I have a range slider in jquery with tooltip above handles, and my issue is with z-index position of tooltips...
I wanna to set them up in way that one which I'm dragging along slider gets above that one which is not dragged.
Currently, the first tooltip is behind last tooltip and I don't know how to set it up to work in above way...
You can see my situation in jsfiddle: http://jsfiddle/dzorz/H4sGB/
jQuery:
$(function() {
$( ".slider-assets" ).slider({
range: true,
min: 100,
max: 500,
values: [ 200, 300 ],
slide: function( event, ui ) {
$( ".amount-assets" ).val( ui.values[ 0 ] + "k € - " + ui.values[ 1 ] + "k €");
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[0] + "k €" + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + ui.values[1] + "k €" + '</div></div>');
}
});
$( ".amount-assets" ).val($( ".slider-assets" ).slider( "values", 0 ) + "k € - " + $( ".slider-assets" ).slider( "values", 1 ) + "k €" );
$('.ui-slider-handle:first').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 0) + "k €" + '</div></div>');
$('.ui-slider-handle:last').html('<div class="tooltip top slider-tip"><div class="tooltip-arrow"></div><div class="tooltip-inner">' + $(".slider-assets").slider("values", 1) + "k €" + '</div></div>');
});
HTML:
<br/>
<br/>
<div class="slider-assets"></div>
<br/>
<input type="text" class="amount-assets" />
CSS:
.amount-assets1,.amount-assets2{
width: 48px;
}
.tooltip {
position: absolute;
z-index: 1020;
display: block;
padding: 5px;
font-size: 11px;
visibility: visible;
margin-top: -2px;
bottom:120%;
margin-left: -2em;
}
.tooltip .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid #000000;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
position: absolute;
width: 0;
height: 0;
}
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: #ffffff;
text-align: center;
text-decoration: none;
background-color: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
I'm not sure if this is css or jquery question of issue, I've tried to increase z-index but it was not working.
Share Improve this question edited Nov 22, 2024 at 17:16 Danny Beckett 20.9k26 gold badges112 silver badges142 bronze badges asked Sep 19, 2013 at 10:44 dzordzdzordz 2,31714 gold badges52 silver badges75 bronze badges4 Answers
Reset to default 2Your issue here is with z-index stacking context. You need to apply the z-index to the ui-slider-handle itself. The following works:
.ui-slider-handle.ui-state-active {
z-index: 3;
position: absolute;
}
You can read more about stacking context here: https://developer.mozilla/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context
Try this:
.ui-tooltip, .arrow:after {
position: absolute;
z-index:9999;
}
Try to add this code in the end of slide handler
$(".slider-assets .ui-slider-handle").css('z-index', '0');
$(ui.handle).css('z-index', '100');
You can increase the z-index on slidestart and reset z-index on slidestop
$(".slider-assets").on("slidestart", function(event,ui){
$(ui.handle).css("z-index","1082");
});
$(".slider-assets").on( "slidestop", function(event, ui){
$(ui.handle).css("z-index","1080");
});
JsFiddle