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: learn.jquery.com/plugins/basic-plugin-creation — fdomn-m
– fdomn-m, Commented Jun 18, 2015 at 10:03

Dave Jarvis · Accepted Answer · 2020-11-23 22:57:30Z

17

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

edited Nov 23, 2020 at 22:57

Dave Jarvis

31.3k43 gold badges186 silver badges326 bronze badges

answered Jun 18, 2015 at 10:08

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gimmly · Accepted Answer · 2021-09-14 08:53:37Z

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, 2021 at 8:53

Gimmly

4631 gold badge6 silver badges15 bronze badges

Comments

Innam Hunzai · Accepted Answer · 2015-06-18 10:12:10Z

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, 2015 at 10:12

answered Jun 18, 2015 at 10:03

Innam Hunzai

4821 gold badge6 silver badges17 bronze badges

7 Comments

fdomn-m Over a year ago

Nice. Rather than call the 'generic function' for each textbox, you mark each textbox that it should be affected by startup function.

Innam Hunzai Over a year ago

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 Over a year ago

var word = document.getElementById("samplebox").value; use jquery this operator to get the text

Innam Hunzai Over a year ago

replace document.getElementById('samplebox').value; with this function $(this).value()

Innam Hunzai Over a year ago

I am using class selector

|

areeb · Accepted Answer · 2015-06-18 10:17:41Z

1

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

answered Jun 18, 2015 at 10:17

areeb

4223 silver badges9 bronze badges

Comments

Mayur Devmurari · Accepted Answer · 2015-06-18 10:15:18Z

0

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>

answered Jun 18, 2015 at 10:15

Mayur Devmurari

4969 silver badges16 bronze badges

Collectives™ on Stack Overflow

Changing tooltip title using jQuery

5 Answers 5

Comments

Comments

7 Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

7 Comments

Comments

Comments

Linked

Related