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.

• javascript
• jquery
• html
• css
• jquery-ui

Share Improve this question Follow edited Nov 22, 2024 at 17:16 Danny Beckett 20.9k2626 gold badges112112 silver badges142142 bronze badges asked Sep 19, 2013 at 10:44 dzordzdzordz 2,3171414 gold badges5252 silver badges7575 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

Your 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