Set the content of Bootstrap tooltip via Javascript

Question

I have included tooltips in my table's cells. Here is how I did it:

<td data-container="body" data-toggle="tooltip" data-html="true" data-original-title="10.5">10.5</td>

<script type="text/javascript">
      $(document).ready(function(){
        $(".table td").tooltip();   
      });
</script>

Until here, I don't have a problem. Now, I want to change the way it works. I have two dictionaries from numeric to text translations.

dic1 = {'0':'zero','1':'one','2':'two','3':'three'....}
dic2 = {'0.25':'a quarter','0.5':'half',....}

Numbers in the table are standards, so there isn't something that I don't have in dictionaries. I want to change the title of the tooltips to this: one half (1.5) instead of 1.5. Splitting the number and take the text from one dictionary and the text from the other and then combine them.

Adding just the tooltip was easy, but now I think that I am stacked.

Ben · Accepted Answer · 2014-06-28 11:05:38Z

1

I haven't tested it, but something like this should work.

$('.table td').each(function () {
    var title = $(this).attr('data-original-title').split('.');
    $(this).attr('data-original-title', dic1[title[0]] + ' ' +
        dic2['0.' + title[1]] + ' (' + title[0] + '.' + title[1] + ')');
});

edited Jun 28, 2014 at 11:05

answered Jun 28, 2014 at 10:44

Ben

1,1631 gold badge8 silver badges14 bronze badges

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

2 Comments

Tasos Over a year ago

Please, edit your answer with the following. 1) You miss one parenthesis before the last ';'. The one that close the attr. 2) change the title with data-original-title. And it works. Please change it so I can choose your answer as the right one. Thank you a lot!

Ben Over a year ago

I'm not sure why it needs to be data-original-title, but I have corrected it. Glad it helped, next time I will test things. :)

Collectives™ on Stack Overflow

Set the content of Bootstrap tooltip via Javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related