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.

Answer 2

Where is the symbol $ from? If it's from jayq library then it's fine. If it's plain javascript jQuery, then you need js/$ instead.

the argument % to the anonymous function associated with :component-did-mount is often named this and it's a React component, not a DOM object. To get the equivalent DOM node to feed jQuery $ selector, use reagent.core/dom-node. Something like:

($ (reagent.core/dom-node %))

Btw, (clj->js {:title "Test"}) can be better written as #js {:title "Test"}