我有以下 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 吗？
谢谢！
【问题讨论】：
标签： javascript jquery css html
您可以在 html 中使用 title 属性 :)
<label title="This is the full title of the label">This is the...</label>
当您将鼠标悬停片刻时，它应该会弹出一个包含完整标题的框。
如果您想要更多控制，我建议您查看适用于 jQuery 的 Tipsy 插件 - 可以在 http://onehackoranother.com/projects/jquery/tipsy/ 找到它，并且上手相当简单。
【讨论】：
只需在标签上设置一个标题：
<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; 为您处理省略号，因此您只需使用 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();
});
最后，如果您需要强大的跨浏览器支持，您可以使用DotDotDot jQuery plugin。
【讨论】：
.prop 回调中执行您希望执行的任何代码，但不能执行 AJAX，因为它是异步的，并且 prop 需要返回值。而不是 prop 你可以只使用 .each
如果你也有 jQuery UI，你可以添加这个：
$(document).ready(function () {
$(document).tooltip();
});
然后你需要一个标题而不是隐藏的输入。 RGraham 已经为您发布了一个答案：P
【讨论】：
您不必使用隐藏字段。使用“标题”属性。它将显示浏览器默认工具提示。然后，您可以使用 jQuery 插件（如之前提到的引导工具提示）来显示自定义格式的工具提示。
<label for="male" title="Hello This Will Have Some Value">Hello ...</label>
提示：您还可以使用 css 修剪不适合框的文本（文本溢出属性）。见http://jsfiddle.net/8eeHs/
【讨论】：
您是否发现使用标准工具提示？您可以使用 title 属性，如
<label for="male" title="Hello This Will Have Some Value">Hello...</label>
您也可以将相同值的标题属性添加到标签所在的元素。
【讨论】：
bootstrap 中的工具提示很好，但是 jQuery UI 中也有一个非常好的工具提示功能，您可以阅读有关here 的信息。
例子：
<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属性”。
<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>
【讨论】：
您可以使用 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;
}
}
【讨论】：