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...上时，我可以使用jquery在工具提示中显示隐藏字段的值Hello This Will Have Some Value吗？

谢谢！

Answer 1

您可以使用“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插件（如前面提到的bootstrap工具提示）来显示自定义格式化的工具提示。

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

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

Answer 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;为你处理省略号，所以你需要做的就是使用jQuery将标签中的文本复制到title属性中：

<强> 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 plugin。

Answer 4

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

这样的标题属性

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

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

Answer 5

您可以在html中使用title属性：）

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

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

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

Answer 6

如果您还有jQuery UI，可以添加：

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

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

Answer 7

引导程序中的工具提示很好，但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属性翻转任何元素时，这将显示title属性的内容作为工具提示。

Answer 8

您可以使用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;
  }
}

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

8 个答案: