最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Tooltips z-index position or something else? - Stack Overflow

programmeradmin8浏览0评论

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 badges
Add a ment  | 

4 Answers 4

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

发布评论

评论列表(0)

  1. 暂无评论