爲標籤的一部分顯示工具提示時，懸停

我有如下標籤：爲標籤的一部分顯示工具提示時，懸停

<label class="col-sm-4 control-label" for="AB">Text A/ Text B:</label>

我希望顯示工具提示，當鼠標懸停在「文字B」而不是當鼠標懸停在「文本」。我嘗試使用jQuery，但它會得到整個標籤，並顯示工具提示，即使當我懸停「文本A」。

$("label:contains('Text B')").prop("title", function() 
{ 
    return "Text B "; 
});

有什麼建議嗎？

來源

2017-03-20 Tom Jones

這似乎只是正常工作對我來說 –

你可能有兩個部分分成兩個跨度，並根據應用的控制span id而不是文本內容 –

簡單包裝內的文字與span並應用適當的title

<label class="col-sm-4 control-label" for="AB"> 
 
    <span title="Text for FIELD A">Text A</span> 
 
    /
 
    <span title="Text for FIELD B">Text B</span>: 
 
</label>

使用jQuery

$(document).ready(function() { 
 
    $('.control-label').each(function() { 
 
    var parts = $(this).text().split('/'); 
 
    $(this).html(
 
     "<span title='" + parts[0] + "'>" + parts[0] + "</span>" + 
 
     "/" + 
 
     "<span title='" + parts[1] + "'>" + parts[1] + "</span>" 
 
    ); 
 
    }) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<label class="col-sm-4 control-label" for="AB">Text A/ Text B:</label>

來源

2017-03-20 07:38:54 Justinas

我忘了提及標籤實際上是由服務器端的方法生成的，將標籤分成兩部分代價很高。因此，我需要在客戶端做工具提示並顯示它。 –

@TomJones檢查更新 – Justinas

標籤內容通常是'text'，但事實並非總是如此，它可以包含嵌套的html元素，如span，...因此，只處理所有文本節點更爲安全。這是一個更安全的實現https://jsfiddle.net/pd6ypssn/循環遍歷所有文本節點***遞歸***是一個不同的問題，也可能會考慮到。（=））OP應該這樣做）。 – Hopeless

HTML一樣，

<label class="col-sm-4 control-label" for="AB">Text A/<span> Text B: </span> </label>

和js，

$("label span").prop("title", function() 
{ 
    return "Text B "; 
});

來源

2017-03-20 07:40:05 Mastikhor

爲標籤的一部分顯示工具提示時，懸停

回答

相關問題