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

I have below HTML code ?

我有以下HTML代码？

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

But actually i dont have enough space to show this much long label. So i thought of creating label as below..

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

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

Then i create a hidden field which will hold entire label value

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

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

Now when user hovers mouse on Hello... can i show hidden field's value Hello This Will Have Some Value in tooltip using jquery?

现在当用户将鼠标悬停在Hello上时...我可以显示隐藏字段的值Hello这将使用jquery在工具提示中有一些价值吗？

Thanks!

谢谢！

7 个解决方案

#1

You can use the "title attribute" for label tag.

您可以使用标签标签的“标题属性”。

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

If you need more control over the looks,

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

1 . try http://getbootstrap.com/javascript/#tooltips as shown below. But you will need to include bootstrap.

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 . try https://jqueryui.com/tooltip/. But you will need to include jQueryUI.

2。试试https://jqueryui.com/tooltip/。但是你需要包含jQueryUI。

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

#2

You don't have to use hidden field. Use "title" property. It will show browser default tooltip. You can then use jQuery plugin (like before mentioned bootstrap tooltip) to show custom formatted tooltip.

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

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

Hint: you can also use css to trim text, that does not fit into the box (text-overflow property). See http://jsfiddle.net/8eeHs/

提示：您还可以使用css修剪文本，这不适合框（文本溢出属性）。见http://jsfiddle.net/8eeHs/

#3

Are you find with using standard tooltip? You could use title attribute like

您是否发现使用标准工具提示？你可以使用title属性

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

You could add the title attribute of same value to the element that label is for as well.

您可以将相同值的title属性添加到标签所用的元素中。

#4

Just set a title on the label:

只需在标签上设置标题：

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

Using jQuery:

使用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();
});

If you can use CSS3, you can use the text-overflow: ellipsis; to handle the ellipsis for you so all you need to do is copy the text from the label into the title attribute using jQuery:

如果你可以使用CSS3，你可以使用text-overflow：省略号;为你处理省略号所以你需要做的就是使用jQuery将标签中的文本复制到title属性中：

HTML:

HTML：

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

CSS:

CSS：

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

jQuery:

jQuery的：

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

Example: http://jsfiddle.net/Xm8Xe/

示例：http：//jsfiddle.net/Xm8Xe/

Finally, if you need robust and cross-browser support, you could use the DotDotDot jQuery plugin.

最后，如果您需要强大的跨浏览器支持，可以使用DotDotDot jQuery插件。

#5

You could use the title attribute in html :)

你可以在html中使用title属性:)

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

When you keep the mouse over for a brief moment, it should pop up with a box, containing the full title.

当你将鼠标暂停一会儿时，它应弹出一个包含完整标题的方框。

If you want more control, I suggest you look into the Tipsy Plugin for jQuery - It can be found at http://onehackoranother.com/projects/jquery/tipsy/ and is fairly simple to get started with.

如果你想要更多的控制，我建议你看一下jQuery的Tipsy插件 - 它可以在http://onehackoranother.com/projects/jquery/tipsy/找到，开始时相当简单。

#6

If you also have jQuery UI, you can add this:

如果你也有jQuery UI，你可以添加：

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

You then need a title instead of a hidden input. RGraham already posted an answer doing this for you :P

然后，您需要一个标题而不是隐藏的输入。 RGraham已经为你做了一个答案：P

#7

Tooltips in bootstrap are good, but there is also a very good tooltip function in jQuery UI, which you can read about here.

引导程序中的工具提示很好，但jQuery UI中还有一个非常好的工具提示功能，您可以在这里阅读。

Example:

例：

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

Then, assuming you have already referenced jQuery and jQueryUI libraries in your head, add a script element like this:

然后，假设您已经在脑中引用了jQuery和jQueryUI库，请添加如下脚本元素：

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

This will display the contents of the title attribute as a tooltip when you rollover any element with a title attribute.

当您使用title属性翻转任何元素时，这将显示title属性的内容作为工具提示。

#1