Question

我有一个标签如下：

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

我希望在将鼠标悬停在＆＃34;文字B＆＃34;上时显示工具提示但不要将鼠标悬停在＆＃34;文字A＆＃34;。我尝试使用jquery，但它会得到整个标签并显示工具提示，即使我悬停＆＃34;文字A＆＃34;。

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

有什么建议吗？

Answer 1

只需使用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>

Answer 2

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 ";
});

悬停时显示部分标签的工具提示

2 个答案: