遵循jquery滑块句柄的工具提示? [英] tooltip to follow jquery slider handle?

问题描述

我想知道是否可以将工具提示附加到滑块手柄上?我当前的滑块功能是:

I am wondering if it would be possible to attach a tooltip to the slider handle? My current slider function is:

            $('#slider').slider({
                max: 18,
                animate: 'slow',
                orientation: 'vertical',
                slide: function(e,ui) {
                    $('#storage').html(storage[ui.value-1]);
                    $('#ram').html(ram[ui.value-1]);
                    $('#bandwidth').html(bandwidth[ui.value-1]);
                    $('#cpu').html(cpu[ui.value-1]);
                    $('#price').html(price[ui.value-1]);
                }
            });

我要接受此提示并应用工具提示以跟随手柄.是否会建议以某种方式确定位置并根据滑块位置动态更新工具提示位置?

I want to take this and apply a tooltip to follow the handle. Would it be recommanded to somehow determine the position and dynamically update the tooltip position based on slider position?

推荐答案

实际上，使用title属性是更简单的方法(belugabob想法)

Actually using the title attribute is the easier way ( belugabob idea)

$(function() {


  $("#slider").slider()
                .find(".ui-slider-handle")
                .attr("title", "Slide Me")

});

但是，如果您希望完全控制，请使用此示例

However if you want full control use this sample

预览: http://jsbin.com/eluqi3/166/edit

$(function() {

  var $slideMe = $("<div/>")
                    .css({ position : 'absolute' , top : 10, left : 0 })
                    .text("Slide Me!")
                    .hide()


  $("#slider").slider()
                .find(".ui-slider-handle")
                .append($slideMe)
                .hover(function()
                        { $slideMe.show()}, 
                       function()
                        { $slideMe.hide()}
                )

});

这篇关于遵循jquery滑块句柄的工具提示?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！