在电子商务项目中，当客户调整价格范围滑块时，如何添加工具提示来显示手柄处的价格范围变化

Question

我正在做一个电子商务项目，为了过滤结果，我们有一个价格范围滑块，我希望在滑块手柄的底部显示工具提示，当客户滑动滑块来固定价格范围时，显示价格范围的变化。

我的滑块和滑块手柄的代码-

<div class=​"ui-slider-range ui-widget-header ui-corner-all" style=​"left:​ 0%;​ width:​   100%;​">​</div>​
<a class=​"ui-slider-handle ui-state-default ui-corner-all" href=​"#" style=​"left:​ 0%;​" data-original-title title>​</a>​
<a class=​"ui-slider-handle ui-state-default ui-corner-all" href=​"#" style=​"left:​ 100%;​">​</a>​

如何将工具提示添加到此现有代码？

Answer 1

我注意到你已经用Twitter引导程序标记了你的问题，所以我认为你在项目中使用了它？

如果是这样，您可以将rel="popover"dataplacement="bottom"属性添加到标签中吗。例如

<a class=​"ui-slider-handle ui-state-default ui-corner-all" rel="popover" data-placement="bottom" href=​"#" style=​"left:​ 0%;​" data-original-title title>​</a>​

然后在jQuery上，您只需选择项目并添加详细信息：

$("#sliderId").tooltip({
animation: true,
title: "Your title here"
});

可以通过引导程序启用的属性列表

如果不能做到这一点，有一个很好的滑块可以免费使用，工具提示已经启用：用于助推器的Eyecon滑块

编辑以下评论：

根据绑定数据的方式，应该可以传入数据——我在网格视图中复制了一个示例。

<a class="photoPopover" href="#" rel="popover" data-placement="right" data-content="<img src='<%#Eval("ImageURL")%>'/>"></a>