使用 jQuery 更改工具提示标题答案

【问题标题】：Changing tooltip title using jQuery使用 jQuery 更改工具提示标题
【发布时间】：2015-06-18 09:58:29
【问题描述】：

帮帮我，因为我是 jQuery 和 Web 开发的新手。我的要求是省略（...）文本框中的长文本然后如果将鼠标悬停在它们上方，则会在工具提示中显示全文。

为此，我使用了 Bootstrap 的 tooltip 。我所做的如下：

下载引导 js 并包含在我的文件中，如下所示：

 <script type="text/javascript" src="scripts/bootstrap.min.js"></script>

像这样改变了我的元素

<input type="text" name="tooltip" id="samplebox" data-toggle="tooltip" title="Ankit" >

为了动态更新标题，我使用了 jQuery

<script>
    $(document).ready(function(){
        $(" #samplebox ").mouseenter(function(){
            var word = document.getElementById("samplebox").value;
            $(" #samplebox ").attr('title', word);
        });     
    });
</script>

这适用于那个元素。

现在我必须为更多的文本框做同样的事情，它们的数量会不断增加。现在，我想创建一个可以传递 id 的通用函数并为鼠标悬停的任何文本框完成该元素。

【问题讨论】：

一个jquery插件怎么样？完整教程在这里：learn.jquery.com/plugins/basic-plugin-creation
看看这个change tooltip title dynamically

标签： javascript jquery html

【解决方案1】：

如果没有样式类，请使用attribute-selector。对于工具提示，还有data-toggle="tooltip"的属性值：

$(document).ready(function(){
    $("[data-toggle=tooltip]").mouseenter(function () {
        var $this = $(this);
        $this.attr('title', $this.val());
    });   
});

Demo

注意：如果要与 Bootstrap 的工具提示一起使用，您可能需要更改属性 data-original-title 而不是 title 以更新工具提示的内容。看看这个question

【讨论】：

【解决方案2】：

你可以像这样使用类选择器

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

这将在您不需要创建任何通用函数的所有文本框上触发事件

【讨论】：

不错。不是为每个文本框调用“通用函数”，而是将每个文本框标记为它应该受到启动函数的影响。
根据需要分配唯一的 id，但还要在您希望触发事件的所有文本框上分配相同的类名
var word = document.getElementById("samplebox").value;使用 jquery this 运算符获取文本
替换 document.getElementById('samplebox').value;用这个函数 $(this).value()
我正在使用类选择器

【解决方案3】：

$(":input").mouseenter(function(){
   var val = $(this).val();
   $(this).attr('title', val);
});

【讨论】：

【解决方案4】：

首先为每个文本框添加通用类。

<input type="text" name="tooltip" class="myclass" data-toggle="tooltip" title="Ankit" >

然后jQuery看起来是这样的。

  <script>
    $(document).ready(function(){
        $(".myclass").mouseenter(function(){
            var word = document.getElementById("samplebox").value;
            $(this).attr('title', word);
        });     
    });
  </script>

【讨论】：

【解决方案5】：

以上代码均不适用于我的引导工具提示。但是，更改 data-original-title 解决了这个问题：

document.getElementById("samplebox").setAttribute("data-original-title", "newText");

【讨论】：