使用jQuery更改工具提示标题

Question

帮助我，因为我是jQuery和web开发的新手。我的要求是椭圆尺寸(.)文本框中的长文本，如果鼠标悬停在文本框上，则在工具提示中显示全文。

为此，我使用了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，并为鼠标悬停的任何文本框完成它。

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。看看这个问题

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

这将触发不需要创建任何泛型函数的所有文本框上的事件。

Answer 3

上述任何代码都不适用于我的引导工具提示。然而，更改data-original-title解决了这个问题：

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