Question

考虑给出的小提琴，其中工具提示消息从html传递。如果我想从JavaScript或jQuery传递工具提示消息，应该进行哪些更改？

<span class="field-tip">
Hover the text.
<span class="tip-content">tooltip message</span>

http://jsfiddle.net/dasettan/o4vp56f7/

Answer 1

你只需要通过javascript / jquery

更改跨度内的文本

$("span.tip-content").text("new tooltip")

为了更好地给你的跨度一个id而不是更改其中的文本，否则如果你有多个span with tool-tip将更新

做类似

的事情

 <span class="tip-content" id="myspan">tooltip message</span>

  $("#myspan").text("new tooltip")

here the fiddle

Answer 2

您可以使用javascript并将id添加到tip-content，然后调用：

document.getElementById("tip-content").innerHTML = "new value";

或使用jquery

$(document).ready(function(){
   $("span.tip-content").html("new value");
});

Answer 3

您可以执行以下操作：

document.querySelector(".field-tip").addEventListener("mouseover", function (event) {
      document.querySelector(".tip-content").innerHTML = "My new tooltip message";
});

Answer 4

您需要更改工具提示元素的内容，这很简单。如果您想反复执行并使其在多个工具提示中工作，您可以创建一个函数，如下所示：

function customMessage(ele,message) {
    var main = document.querySelector(ele),
       tooltip = main.children[0];
    main.addEventListener('mouseover',function() {
        tooltip.innerHTML = message;
    })
}

使第一个参数成为要悬停的元素，让第二个参数成为要在工具提示中显示的消息

customMessage('.field-tip',"random message");

Example

Answer 5

以下代码将在鼠标结束时显示工具提示，当您退出文本消息时将更改为原始消息。

<script type="text/javascript">
$(document).ready(function(e) {
    $( "span.field-tip" ).hover(function() {
    //Print message when mouse in
    $("span.tip-content").html("Tool tip message");
}, function() {
    //Print message when mouse out
    $("span.tip-content").html("Empty Tool tip Message");
  });
});

</script>

从JavaScript动态加载工具提示消息

5 个答案: