使用jQuery更改工具提示标题

帮助我，因为我是jQuery和Web开发的新手。 我的要求是在文本框中椭圆化（...）长文本，然后如果鼠标悬停在文本框上，则在工具提示中显示全文。

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

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

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

像这样改变了我的elemnt

<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，并通过鼠标悬停的任何文本框完成该功能。

---

如果没有类，您可以使用属性选择器，正如我对工具提示的使用一样，总是有一个属性data-toggle="tooltip" ：

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

演示

注意：

对于使用引导工具提示，您可能必须更改属性data-original-title而不是title来更新工具提示的内容。 看看这个问题

---

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

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

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

---

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

链接地址: http://www.djcxy.com/p/80913.html

上一篇: Changing tooltip title using jQuery

下一篇: Inspect element that only appear when other element is mouse overed/entered