更改工具提示文本jQuery [英] Change tooltip text jquery
本文介绍了更改工具提示文本jQuery的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
假设title属性被用作工具提示的文本。是否有可能只是改变文本，使用jQuery？
<！DOCTYPE html>
< html lang =en>
< head>
< title>引导程序示例< / title>
< meta charset =utf-8>
< meta name =viewportcontent =width = device-width，initial-scale = 1>
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css>
< script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script>
< script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>
< / head>
< body>
< div class =container>
< h3>工具提示示例< / h3>
< a href =＃id =tooldata-toggle =tooltiptitle =Hfdfd！>将鼠标悬停在我身上< / a>
< / div>
< script>
$（document）.ready（function（）{
$（'[data-toggle =tooltip]'）。tooltip（）;
}）;
< / script>
< / body>
< / html>
解决方案
我无法使用选项更改因为我相信api说使用标题就是告诉它如果标题不在那里应该是什么值。我通过将标题更改为 data-title 并将title选项作为返回此值的函数来实现。
$（document）.ready（function（）{$（'[data-toggle =tooltip]'） .tooltip（{title：function（）{return this.getAttribute（'data-title'）;}}）; setInterval（function（）{$（'[data-toggle =tooltip]'）。attr（' data-title'，Date.now（））;}，1000）;}）;
< link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css> < script src =https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js>< / script> < script src =https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js>< / script>< div class =container> < h3>工具提示示例< / h3> < a href =＃id =tooldata-toggle =tooltipdata-title =Hfdfd！>将鼠标悬停在我身上< / a>< / div> / pre>
Suppose the title attribute was used as the text for a tool tip. Is it possible just to change the text, using jQuery?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" id="tool" data-toggle="tooltip" title="Hfdfd!">Hover over me</a>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</body>
</html>
解决方案
I couldn't get it to change with the option as I believe the api says using title is to tell it what the value should be if the title is not there. I got it to work by changing the title to be data-title and gave the title option as a function that returns this value.
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip({
title: function () {
return this.getAttribute('data-title');
}
});
setInterval(function(){
$('[data-toggle="tooltip"]').attr('data-title', Date.now());
}, 1000);
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h3>Tooltip Example</h3>
<a href="#" id="tool" data-toggle="tooltip" data-title="Hfdfd!">Hover over me</a>
</div>
这篇关于更改工具提示文本jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
