0

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

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

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

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

4

1 回答 1

0

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

如果是这样，您能否将 rel="popover" data-placement="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>​&lt;/a>​

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

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

能够通过引导程序启用的属性列表在这里

如果做不到这一点，有一个不错的滑块可以免费使用，并且已经启用了工具提示： 用于 boostrap 的 Eyecon 滑块

编辑以下评论：

根据您绑定数据的方式，应该可以将数据传入 - 我已经复制了我在 gridview 中的一个示例。

<a class="photoPopover" href="#" rel="popover" data-placement="right" data-content="<img src='<%#Eval("ImageURL")%>'/>"></a>
于 2013-08-13T07:15:37.713 回答