How to attach Bootstrap tooltip to Clojurescript Reagent component

Question

Here's a component I'm rendering at the end of each row of a table. The tooltip portion is not working.

How can I attach Bootstrap tooltips to each component after it renders?

(defn edit-button-component []
    (fn [attrs]
        ^{:component-did-mount #(.tooltip ($ %) (clj->js {:title "Test"}))}
        [:button.btn.btn-default attrs
        [:span.glyphicon.glyphicon-pencil]]))

Answer 1

In addition to @myguidingstar explanation on accessing js/$ and the DOM node, it seems your metadata was not at the right place. It needs to be on the function, not the vector.

Here is an implementation that works for me:

(def tooltip
  ^{:component-did-mount #(.tooltip (js/$ (reagent.core/dom-node %)))}
  (fn [message]
    [:img.help {:src "img/help.png", :data-placement "bottom", :title message}]))

Also make sure jquery is loaded before your app.js in your html file.