CODEWITHSUNDEEP
javascripttwitter-bootstraptooltip
Ya.
Ya.

Reputation: 2627

bootstrap tooltip: how to specify tooltip text using a javascript function

bootstrap tooltip allows me to specify tooltip for the element by merely specifying the "title" attribute:

<div title="This is a test tooltip"> ... </div>

Is there any way to avoid hardcoding the tooltip content and specify a javascript function instead? I tried title="javascript:myFunction()" but it doesn't resolve it.

I looked at the booststrap code and it seems to contain support for function call I just can't figure out the syntax:

Snippet from bootstrap tooltip:

, getTitle: function () { 
      var title
      , $e = this.$element
      , o = this.options

      title = $e.attr('data-original-title')
       || (typeof o.title == 'function' ? o.title.call($e[0]) :  o.title)

     return title
  }

Upvotes: 4

Views: 10670

Answers (3)

Diogenes Chepe Ardines Salazar
Diogenes Chepe Ardines Salazar

Reputation: 159

if you are using bootstrap 3, you can put a id in your div 

<div id="title-text" title="This is a test tooltip"> ... </div>

and then use this code

$("#title-text").attr('data-original-title', "the title");

Upvotes: 1

Ruan Mendes
Ruan Mendes

Reputation: 92274

http://twitter.github.io/bootstrap/javascript.html#tooltips

Give your div an id and call

function titleSetter(node) {
   return "My Tooltip text";
}
$('#my-div-id').tooltip({
    title: 'My Tooltip text'
});

// or

$('#my-div-id').tooltip({
    title: titleSetter
})

Upvotes: 6

jhamm
jhamm

Reputation: 25032

I dont know how to use a function, but I use a config file to hold the title/body of my tooltips. I then use a data-attribute for the title and body and leave it in my html. Here is my config file (really just some json):

var help = {
    '001': {
      title: 'Title 1',
      description: 'Body 1'
    },
    '002': {
      title: 'Title 2',
      description: 'Body 2'
    }
  }

My html looks just like it sounds:

  <div data-help="001"></div>

I then make the title and content return a function in my tool tips, like so:

var tooltipOptions = {
    trigger: 'manual',
    title: function() {
      return help[$(this).attr('data-help')].title;
    },
    content: function() {
      return help[$(this).attr('data-help')].description;
    }
  };

And I now have a dynamic body and title for my tool tips.

I believe this will solve the problem you were encountering in your question. Good luck!

Upvotes: 1

Related Questions