顯示標籤懸停的工具提示？

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

您可以使用title屬性在HTML :)

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

當你把鼠標放在一個短暫的瞬間，但應該彈出一個盒子，裏面裝着的全名。

如果你想要更多的控制，我建議你看看jQuery的Tipsy插件 - 它可以在http://onehackoranother.com/projects/jquery/tipsy/找到，並且開始相當簡單。

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

如果你也有jQuery UI的，你可以補充一點：

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

然後，您需要一個標題，而不是一個隱藏的輸入。 RGraham已經發布了一個答案爲你做這件事：P

Answer 5

你不必使用隱藏字段。使用「標題」屬性。它會顯示瀏覽器的默認工具提示。然後，您可以使用jQuery插件（如前面提到的引導工具提示）來顯示自定義格式的工具提示。提示：你也可以使用css來修剪文本，這不適合框（文本溢出屬性）。請參閱http://jsfiddle.net/8eeHs/

Answer 6

您是否找到並使用標準工具提示？您可以使用標題屬性，如

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

您可以將相同值的title屬性添加到標籤所用的元素。

Answer 7

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屬性的元素時。