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.

How about a jquery plugin? Full tutorial here: https://learn.jquery.com/plugins/basic-plugin-creation/ — freedomn-m, Jun 18 '15 at 10:03
Take a look at this [change tooltip title dynamically](https://stackoverflow.com/a/53090690/5609501) — Sherif Salah, Oct 31 '18 at 19:33

score 16 · Accepted Answer · edited Nov 23 '20 at 22:57

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

score 4 · Answer 2 · answered Sep 14 '21 at 08:53

4

None of the codes above worked for my bootstrap tooltips. However, changing the data-original-title fixed the issue:

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

answered Sep 14 '21 at 08:53

Gimmly

443
1
6
15

Innam Hunzai · Answer 3 · 2015-06-18T10:12:10.167

3

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

edited Jun 18 '15 at 10:12

answered Jun 18 '15 at 10:03

Innam Hunzai

442
1
6
17

Nice. Rather than call the 'generic function' for each textbox, you mark each textbox that it should be affected by startup function. – freedomn-m Jun 18 '15 at 10:05
assign unique id's as required but also assign a same class name on all those textboxes you want the event to be fired – Innam Hunzai Jun 18 '15 at 10:07
var word = document.getElementById("samplebox").value; use jquery this operator to get the text – Innam Hunzai Jun 18 '15 at 10:09
replace document.getElementById('samplebox').value; with this function $(this).value() – Innam Hunzai Jun 18 '15 at 10:10
I am using class selector – Innam Hunzai Jun 18 '15 at 10:14
Hey bro I copied the sorcecode of the question and forget to make edit in the getting and setting the value... i changed it 5 mins ago please revise the answer – Innam Hunzai Jun 18 '15 at 10:19
This is very good. The only thing is that in jquery $(this).value(); should read $(this).val(); – Pismotality Oct 16 '17 at 18:41

score 1 · Answer 4 · answered Jun 18 '15 at 10:17

1

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

answered Jun 18 '15 at 10:17

areeb

424
3
9

score 0 · Answer 5 · answered Jun 18 '15 at 10:15

First add common class to every textbox.

<input type="text" name="tooltip" class="myclass" data-toggle="tooltip" title="Ankit" >

Then jQuery seems like this.

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

Changing tooltip title using jQuery

5 Answers5