Отобразить всплывающую подсказку о наведении меток?

Ответ 1

Вы можете использовать атрибут title " для метки метки.

<label title="Hello This Will Have Some Value">Hello...</label>

Если вам нужно больше контролировать внешний вид,

1. попробуйте http://getbootstrap.com/javascript/#tooltips, как показано ниже. Но вам нужно будет включить загрузку.

<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Hello This Will Have Some Value">Hello...</button>

2. попробуйте https://jqueryui.com/tooltip/. Но вам нужно будет включить jQueryUI.

<script type="text/javascript">
$(document).ready(function(){
$(this).tooltip();
});
</script>

Ответ 2

Вам не нужно использовать скрытое поле. Используйте свойство title. Он отобразит всплывающую подсказку по умолчанию браузера. Затем вы можете использовать плагин jQuery (например, перед упомянутой подсказкой для начальной загрузки), чтобы отобразить всплывающую подсказку с настраиваемым форматированием.

<label for="male" title="Hello This Will Have Some Value">Hello ...</label>

Подсказка: вы также можете использовать css для обрезки текста, который не помещается в поле (свойство переполнения текста). См. http://jsfiddle.net/8eeHs/

Ответ 3

Просто установите заголовок на метке:

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

Использование jQuery:

<label for="male" data-title="Language" />
<input type="hidden" name="Language" value="Hello This Will Have Some Value">

$("label").prop("title", function() {
    return $("input[name='" + $(this).data("title") + "']").text();
});

Если вы можете использовать CSS3, вы можете использовать text-overflow: ellipsis; для обработки эллипсиса для вас, поэтому все, что вам нужно сделать, это скопировать текст из метки в атрибут title с помощью jQuery:

HTML:

<label for="male">Hello This Will Have Some Value</label>

CSS

label {
    display: inline-block;
    width: 50px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

JQuery

$("label").prop("title", function() {
   return $(this).text(); 
});

Пример: http://jsfiddle.net/Xm8Xe/

Наконец, если вам нужна надежная и кросс-браузерная поддержка, вы можете использовать плагин DotDotDot jQuery.

Ответ 4

Вы найдете с помощью стандартной подсказки? Вы можете использовать атрибут title, например

<label for="male" title="Hello This Will Have Some Value">Hello...</label>

Вы можете добавить атрибут title того же значения к элементу, который также используется для метки.

Ответ 5

Вы можете использовать атрибут title в html:)

<label title="This is the full title of the label">This is the...</label>

Когда вы на короткое время держите мышь, он должен появиться с полем, содержащим полный заголовок.

Если вы хотите большего контроля, я предлагаю вам заглянуть в Подключаемый плагин для jQuery. Его можно найти в http://onehackoranother.com/projects/jquery/tipsy/ и справедливо просто начать с.

Ответ 6

Если у вас также есть jQuery UI, вы можете добавить это:

$(document).ready(function () {
  $(document).tooltip();
});

Затем вам нужен заголовок вместо скрытого ввода. RGraham уже отправил ответ, сделав это для вас: P

Ответ 7

Подсказки в бутстрапе хороши, но в jQuery UI есть очень хорошая функция подсказки, которую вы можете прочитать здесь здесь.

Пример:

<label for="male" id="foo" title="Hello This Will Have Some Value">Hello...</label>

Затем, предположив, что вы уже ссылались на библиотеки jQuery и jQueryUI в своей голове, добавьте элемент script следующим образом:

<script type="text/javascript">
$(document).ready(function(){
    $(this).tooltip();
});
</script>

Это отобразит содержимое атрибута title как всплывающую подсказку при опрокидывании любого элемента с атрибутом title.