Подсказка для слайдера диапазона JQuery

Question

Подсказка для слайдера диапазона JQuery

0

Вот мой html:

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

Мне нужно отобразить всплывающую подсказку при перемещении слайдера.

Как я могу достичь этого?

Вот моя скрипка

Vikneshwaren 10 апр. 2014, в 09:31

Источник

Теги:

javascript

jquery

html

css

jquery-ui

2 ответа

0

Something like this??

JSFiddle

обновлен до вашего jsfiddle

user2837849 10 апр. 2014, в 05:10

Ещё вопросы

David · Accepted Answer · 2014-04-10T04-28-00.000Z

1

Лучший ответ

Простейшей формой popover, которая не потребует CSS/JS, является атрибут title, который можно установить практически на все!

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

Наведите курсор на него примерно на 2 секунды, и он появится.

JSFiddle

Если вы ищете что-то более отзывчивое, самый простой способ сделать это - включить API Bootstrap Tooltips, в котором есть много кода, уже написанного, который может поместить любой контент, который вы хотите [above|below|left|right] любой элемент.

David 10 апр. 2014, в 04:28

0

Это не похоже на работу после перемещения ползунка.
Ruddy 10 апр. 2014, в 07:08
0

@Ruddy Он исчезает, когда вы убираете мышь или щелкаете мышью, но он снова появляется, если вы наводите курсор мыши еще на 2 секунды.
David 10 апр. 2014, в 07:09
0

@Vikneshwaren А, значит, вы хотите модный слайдер;) Хорошо, тогда. Кстати, чтобы сделать встроенные ссылки, вы делаете [display text](url)
David 10 апр. 2014, в 07:11
0

Мне нужно что-то вроде jsfiddle.net/cqVPM/7
Vikneshwaren 10 апр. 2014, в 07:11
0

@ Давид, я знаю, как это работает. Он не появляется у меня после перемещения слайдера. Хром 33.
Ruddy 10 апр. 2014, в 07:12
0

Пожалуйста, кто-то может отредактировать мою скрипку или настроить новую скрипту с рабочей, пожалуйста
Vikneshwaren 10 апр. 2014, в 07:12
0

@ Радди Да, ты должен навести мышку и снова парить.
David 10 апр. 2014, в 07:12
0

@ Давид Опять же, я знаю, как это работает. Это не работает.
Ruddy 10 апр. 2014, в 07:13
0

Ну на моем Chrome 33 он работает ;) Не уверен, в чем проблема.
David 10 апр. 2014, в 07:13
0

@ Дэвид Очень странно, работает, когда я делал это в FF. Также, кажется, работает, когда я щелкаю по input но mouseout , кажется, не работает. Без понятия.
Ruddy 10 апр. 2014, в 07:16
0

@ Давид Пожалуйста, отредактируйте мою скрипку или установите новую и помогите мне, пожалуйста
Vikneshwaren 10 апр. 2014, в 07:16
0

@Vikneshwaren Просто используйте API начальной загрузки, с которым я связан. Это будет намного проще, чем создавать новый с нуля.
David 10 апр. 2014, в 07:20
0

где ты это связал? @David
Vikneshwaren 10 апр. 2014, в 07:24
0

@Vikneshwaren Здесь
David 10 апр. 2014, в 07:24
0

@ Давид этот jsfiddle.net/iviknesh/H2FZQ/6 не работает :(
Vikneshwaren 10 апр. 2014, в 07:41
0

@Vikneshwaren Вы только добавили файл CSS. Вам также нужен JS, и всплывающая подсказка должна находиться внутри $(function(){}); Я положу один вместе.
David 10 апр. 2014, в 07:46
0

@ Давид Пожалуйста, поставь их и покажи мне
Vikneshwaren 10 апр. 2014, в 07:51
0

@Vikneshwaren Это должно помочь вам начать
David 10 апр. 2014, в 07:51
0

@ Давид Что мне делать, если я хочу изменить текст при перемещении ползунка?
Vikneshwaren 10 апр. 2014, в 08:00
0

@ Дэвид Это не работает! jsfiddle.net/iviknesh/H2FZQ/12
Vikneshwaren 10 апр. 2014, в 08:07
0

Пожалуйста, помогите .. мне нужно изменить текст, как ползунок перемещается
Vikneshwaren 10 апр. 2014, в 08:25

Показать ещё 19 комментариев