javascript 使用 jQuery 更改工具提示标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30912225/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Changing tooltip title using jQuery
提问by Ankit
Help me out, as I am new to jQuery & web development. My requirement was to ellipsize(...) the long text in text boxes and then if mouse is hovered over them display the full text in tooltip.
帮助我，因为我是 jQuery 和 Web 开发的新手。我的要求是对文本框中的长文本进行 ellipsize(...)，然后如果鼠标悬停在它们上面，则在工具提示中显示全文。
For this I used Bootstrap's tooltip . What I did was the following :
为此，我使用了 Bootstrap 的 tooltip 。我所做的是以下内容：
Downloaded bootstrap js and included in my file like this :
下载了 bootstrap js 并包含在我的文件中，如下所示：
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
Changed my elemnt like this
像这样改变了我的元素
<input type="text" name="tooltip" id="samplebox" data-toggle="tooltip" title="Ankit" >
For Dynamically updating the title, I made use of jQuery
为了动态更新标题，我使用了 jQuery
<script>
$(document).ready(function(){
$(" #samplebox ").mouseenter(function(){
var word = document.getElementById("samplebox").value;
$(" #samplebox ").attr('title', word);
});
});
</script>
This works fine for that one element.
这适用于那个元素。
now I have to do the same thing for more text-boxes, whose number can keep on increasing. Now, I want to create a generic function where I can pass the id of that element and get it done for any textbox over which mouse is hovered.
现在我必须对更多的文本框做同样的事情，它们的数量会不断增加。现在，我想创建一个通用函数，我可以在其中传递该元素的 id 并为鼠标悬停在其上的任何文本框完成它。
回答by empiric
if there are no classes you can use the attribute-selectoras I assume for the use of the tooltip there's always an attribute data-toggle="tooltip":
如果没有类，您可以使用属性选择器，因为我假设使用工具提示总是有一个属性data-toggle="tooltip"：
$(document).ready(function(){
$("[data-toggle=tooltip]").mouseenter(function () {
var $this = $(this);
$this.attr('title', $this.val());
});
});
Note:
笔记：
For the use with bootstraps tooltip you may have to change the attribute data-original-titleinstead if titleto update the content of your tooltip. Have a look at this question
对于与引导工具提示一起使用，data-original-title如果title要更新工具提示的内容，您可能必须更改属性。看看这个问题
回答by Innam Hunzai
You can use class selector like this
您可以像这样使用类选择器
<input type="text" name="tooltip" class="samplebox" data-toggle="tooltip" title="Ankit" >
<script>
$(document).ready(function(){
$(".samplebox").mouseenter(function(){
var word = $(this).value();
$(this).attr('title', word);
});
});
</script>
This will fire the event on all the text boxes you dont need to create any generic function
这将在您不需要创建任何通用函数的所有文本框上触发事件
回答by areeb
$(":input").mouseenter(function(){
var val = $(this).val();
$(this).attr('title', val);
});
回答by Mayur Devmurari
First add common class to every textbox.
首先向每个文本框添加公共类。
<input type="text" name="tooltip" class="myclass" data-toggle="tooltip" title="Ankit" >
Then jQuery seems like this.
然后jQuery看起来像这样。
<script>
$(document).ready(function(){
$(".myclass").mouseenter(function(){
var word = document.getElementById("samplebox").value;
$(this).attr('title', word);
});
});
</script>
