JQuery范圍滑塊工具提示

Question

這是我的HTML：

<div class="col-md-4"><input autocomplete="off" type="range" min="1" max="20" value="10" id="agriculture" oninput="display(id);"></div>

我需要在移動滑塊時顯示工具提示。

我怎樣才能實現這一目標？

這是我的小提琴

Answer 1

不需要任何CSS / JS的最簡單形式的popover是title屬性，幾乎可以設置任何東西！

<input ... title="Hey, you should drag me!"/>

將鼠標懸停在它上面約2秒鍾就會顯示出來。

的jsfiddle

---

如果您正在尋找更具響應性的內容，最簡單的方法是合並Bootstrap Tooltips API ，它已經編寫了大量代碼，可以放置您想要的任何內容[above|below|left|right]元件。

Answer 2

Something like this??

的jsfiddle

更新到你的jsfiddle