javascript - 使用 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该元素并为鼠标悬停在其上的任何文本框完成它。

Answer 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