Tasos
Tasos

Reputation: 7577

Set the content of Bootstrap tooltip via Javascript

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.

Upvotes: 0

Views: 104

Answers (1)

Ben
Ben

Reputation: 1143

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] + ')');
});

Upvotes: 1

Related Questions