在Label的悬停上显示工具提示？

Question

我有以下HTML代码？

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

但实际上我没有足够的空间来展示这么长的标签.所以我想创建如下标签..

<label for="male">Hello...</label>

然后我创建一个隐藏字段,它将保存整个标签值

<input type="hidden" name="Language" value="Hello This Will Have Some Value">

现在,当用户将鼠标悬停在上面Hello...时,我可以Hello This Will Have Some Value使用jquery在工具提示中显示隐藏字段的值吗？

谢谢!

Answer 1

您可以使用label 属性的"title属性".

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

如果你需要更多控制外观,

1.尝试http://getbootstrap.com/javascript/#tooltips,如下所示.但是你需要包含bootstrap.

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

Answer 2

您不必使用隐藏字段。使用“标题”属性。它将显示浏览器的默认工具提示。然后，您可以使用jQuery插件（如前面提到的引导工具提示）来显示自定义格式的工具提示。

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

提示：您还可以使用css修剪不适合该框的文本（text-overflow属性）。参见http://jsfiddle.net/8eeHs/