bootstrap tooltip: how to specify tooltip text using a javascript function - Stack Overflow

admin管理员组

文章数量:1287643

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
  }    

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
  }    

• javascript
• twitter-bootstrap
• tooltip

Share Improve this question Follow edited Jun 19, 2013 at 19:36 Adrift 59.8k1212 gold badges9797 silver badges9292 bronze badges asked Jun 19, 2013 at 19:35 Ya.Ya. 2,65755 gold badges3838 silver badges7070 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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
})

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!

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");

本文标签： bootstrap tooltip how to specify tooltip text using a javascript functionStack Overflow