我有以下的 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...上时，我可以使用jQuery在工具提示中显示隐藏字段的值Hello This Will Have Some Value吗？
谢谢！
<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>
您不必使用隐藏字段。使用"title"属性，它将显示浏览器默认工具提示。您可以使用jQuery插件（如之前提到的bootstrap工具提示）来显示自定义格式的工具提示。
<label for="male" title="Hello This Will Have Some Value">Hello ...</label>
提示：您还可以使用CSS来裁剪不适合盒子的文本（text-overflow属性）。请查看http://jsfiddle.net/8eeHs/
title属性 :)<label title="This is the full title of the label">This is the...</label>
。
<label for="male" title="Hello This Will Have Some Value">Hello...</label>
<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();
});
text-overflow: ellipsis;来处理省略号，这样您只需要使用jQuery将标签中的文本复制到标题属性中即可：
HTML:
<label for="male">Hello This Will Have Some Value</label>
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插件。
.prop回调函数中执行任何代码，但不能使用AJAX，因为它是异步的，而prop需要一个返回值。你可以使用.each代替prop。 - CodingIntrigue您是否满意使用标准的工具提示？您可以使用类似于 title 属性的方式
<label for="male" title="Hello This Will Have Some Value">Hello...</label>
你可以使用css属性content和attr来在:after伪元素中显示属性的内容。你可以使用默认的title属性（这是一种语义化的解决方案），或者创建一个自定义属性，例如data-title。
HTML：
<label for="male" data-title="Please, refer to Wikipedia!">Male</label>
CSS：
label[data-title]{
position: relative;
&:hover:after{
font-size: 1rem;
font-weight: normal;
display: block;
position: absolute;
left: -8em;
bottom: 2em;
content: attr(data-title);
background-color: white;
width: 20em;
text-aling: center;
}
}
如果您也有jQuery UI，您可以添加以下内容：
$(document).ready(function () {
$(document).tooltip();
});
Bootstrap中的工具提示很好，但是jQuery UI中也有一个非常好的工具提示功能，您可以在这里阅读相关信息。
示例：
<label for="male" id="foo" title="Hello This Will Have Some Value">Hello...</label>
然后，假设您已经在头部引用了jQuery和jQueryUI库，请添加以下脚本元素：
<script type="text/javascript">
$(document).ready(function(){
$(this).tooltip();
});
</script>
当您将鼠标悬停在具有title属性的任何元素上时，它将显示title属性的内容作为工具提示。