Changing tooltip title using jQuery

Question

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.

Answer 1

If there are no style classes, use the attribute-selector. For a tooltip, there's also the attribute value of 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 Bootstrap's 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