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

Loading tooltip message dynamically from JavaScript

本文关键字：工具提示 消息 加载 动态 JavaScript      更新时间：2023-09-26

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

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

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

您只需要通过javascript/jquery 更改span内部的文本

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

为了更好地给你的跨度一个id，而不是更改里面的文本，否则如果你有多个跨度和工具提示，所有的都会更新

做一些类似的事情

 <span class="tip-content" id="myspan">tooltip message</span>
  $("#myspan").text("new tooltip")

这里是小提琴

您可以使用javascript并添加id来提示内容，然后调用此：

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

或使用jquery

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

您可以执行以下操作：

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

当鼠标悬停时，下面的代码将显示工具提示，当您离开时，文本消息将更改为原始消息。

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

您需要更改工具提示元素的内容，这很简单。如果你想反复做，并使其在多个工具提示中工作，你可以制作一个函数，比如：

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

示例

相关文章：