從javascript動態加載工具提示消息

考慮提供的提琴，其中工具提示消息從html傳遞。如果我想從javascript或jquery傳遞工具提示消息，應該進行哪些更改？請幫助...從javascript動態加載工具提示消息

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

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

來源

2015-11-02 das

你只需要通過使用Javascript/jQuery的

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

用於改變文本的範圍內更好地給你的跨度ID和比改變它裏面的文本，否則，如果你有多個工具提示跨度所有將更新

這樣做

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

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

here the fiddle

來源

2015-11-02 11:15:02

您可以使用JavaScript並添加ID給小費內容然後調用此：

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

或使用jQuery

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

來源

2015-11-02 11:15:16 vivid

你可以做一些事情e：

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

來源

2015-11-02 11:15:25 user5325596

您需要更改tooltip元素的內容，這很簡單。如果你想反覆做它，讓它在多個提示工作，你可以做一個函數，是這樣的：

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

來源

2015-11-02 11:21:17

下面的代碼將顯示工具提示，當鼠標滑過，當你出來的文字信息的顯示將變爲原來的一個。

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

來源

2015-11-02 11:27:39

從javascript動態加載工具提示消息

回答

相關問題