使用jQuery更改提示工具标题

Question

由于我是jQuery和web开发的新手，帮帮我吧。 我的需求是在文本框中裁剪（...）长文本，当鼠标悬停在其上时显示完整的文本工具提示。

为此，我使用了Bootstrap的工具提示。 我所做的是：

下载了Bootstrap 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，以便在鼠标悬停在任何文本框上时都可以完成它。

- Ankit

---

怎么样，用一个jQuery插件如何？完整的教程在这里：https://learn.jquery.com/plugins/basic-plugin-creation/ - freedomn-m

看一下这个动态更改工具提示标题。 - Sherif Salah

Answer 1

如果没有样式类，请使用属性选择器。对于工具提示，还可以使用属性值data-toggle="tooltip"：

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

演示

注意：对于使用Bootstrap的工具提示，如果要更新您的工具提示内容，则可能需要更改属性data-original-title而不是title。请看这个问题

- empiric

Answer 2

以上代码都未能解决我bootstrap工具提示的问题。 然而，修改data-original-title可以解决此问题:

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

- Gimmly

Answer 3

您可以像这样使用类选择器。

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

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

- Innam Hunzai

---

不错。与其为每个文本框调用“通用函数”，不如标记每个文本框应受启动函数的影响。 - freedomn-m

根据需要分配唯一的ID，但是还要在所有想要触发事件的文本框上分配相同的类名。 - Innam Hunzai

使用jQuery的this操作符来获取文本：var word = document.getElementById("samplebox").value; - Innam Hunzai

我正在使用类选择器。 - Innam Hunzai

嘿兄弟，我复制了问题的源代码，忘记在获取和设置值时进行编辑... 我5分钟前更改了它，请重新审查答案。 - Innam Hunzai

Answer 4

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

- areeb

Answer 5

首先，将通用类添加到每个文本框中。

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

- Mayur Devmurari