Question

I have the following CoffeeScript:

$ ->
  $("[rel='tooltip']").tooltip
    html: false
    delay: { show: 500, hide: 100 }
    placement: 'bottom'

This sets up Twitter Bootstrap tooltips on page load. My problem is that I load AJAX links into tabs, and I need to set up tooltips in that AJAX-loaded content. I thought the solution would be to use on, but I can’t figure out what element to call it on and what event to use. I tried:

$(document).on 'ready', "[rel='tooltip']", ->
  console.log 'setting up tooltips'

But the console message never appeared, so that doesn’t seem to work.

I want one chunk of code that will set up any tooltips that are on the page at load time, as well as any tooltips that appear in the future.

Edit: charlietfl’s answer did it! Outside of my $ -> callback, I placed:

$(document).tooltip
  selector: "[rel='tooltip']"
  html: false
  delay: { show: 500, hide: 100 }
  placement: 'bottom'

Now my tooltips that are already in the page get set up, and new tooltips that appear in AJAX-loaded tabs get set up.

Answer 1

Bootstrap already has delegation method built in. Use the selector option to delegate for future elements that don’t exist when code is run:

$(document).tooltip({
     selector: "[rel='tooltip']"
      /* other options*/
})

Reference: http://twitter.github.com/bootstrap/javascript.html#tooltips