Changing tooltip title using jQuery

Help me out, as I am new to jQuery & web development. My requirement was to ellipsize(...) the long text in text boxes and then if mouse is hovered over them display the full text in tooltip.

For this I used Bootstrap's tooltip . What I did was the following :

Downloaded bootstrap js and included in my file like this :

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

Changed my elemnt like this

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

For Dynamically updating the title, I made use of jQuery

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

This works fine for that one element.

now I have to do the same thing for more text-boxes, whose number can keep on increasing. Now, I want to create a generic function where I can pass the id of that element and get it done for any textbox over which mouse is hovered.

---

if there are no classes you can use the attribute-selector as I assume for the use of the tooltip there's always an attribute data-toggle="tooltip" :

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

Demo

Note:

For the use with bootstraps tooltip you may have to change the attribute data-original-title instead if title to update the content of your tooltip. Have a look at this question

---

You can use class selector like this

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

This will fire the event on all the text boxes you dont need to create any generic function

---

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

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

上一篇: Highcharts不在jQuery工具提示中呈现

下一篇: 使用jQuery更改工具提示标题