Question

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

            $('#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]);
                }
            });

我想采取这个并应用工具提示来跟踪句柄。是否会建议以某种方式确定位置并根据滑块位置动态更新工具提示位置？

Answer 1

实际上使用title属性是更简单的方法（belugabob idea）

$(function() {


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

});

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

预览：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()}
                )

});

Answer 2

几乎可以为任何HTML元素分配工具提示，方法是给它一个'title'属性，其中requred text是属性的值。

对于滑块，您能否可靠地找到用于绘制滑块手柄的HTML元素？如果是这样，只需添加一个title属性即可开始营业。

编辑：一般来说，明智地使用title属性可以使您的页面更整洁 - 通过添加上下文敏感的信息，您不会占用屏幕空间直到实际需要，并帮助那些不熟悉UI的人你的网站。

工具提示跟随jquery滑块手柄？

2 个答案: