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-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></a>

然后在你的jQuery上，你可以选择项目并添加细节：

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

能够通过bootstrap here

启用的属性列表

如果失败了，有一个很好的滑块可以免费使用工具提示已经启用： Eyecon slider for boostrap

以下评论编辑：

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

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

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

1 个答案: