Tooltip using React's lifecycle methods

tooltip-react-lifecycle.cljs

(defn find-tooltip-controller-class [node]
  (or (some-> node
              .-classList
              (.contains "js-tooltip-controller"))
      (some-> (.-parentNode node) (find-tooltip-controller-class))))

(defn tooltip [display-tooltip?]
  (let [click-handler (fn [e]
                        (.stopPropagation e)
                        (when-not (find-tooltip-controller-class (.. e -target))
                          (reset! display-tooltip? false)))]
    (r/create-class
      {:reagent-render (fn []
                         [:div.tooltip.tooltip--bottom
                          [:button {:on-click #(reset! display-tooltip? false)} "x"]
                          [:p "Hello there!"]])
       :component-did-mount #(.addEventListener js/document "click" click-handler)
       :component-will-unmount #(.removeEventListener js/document "click" click-handler)})))

(defn main []
  (let [display-tooltip? (r/atom false)]
    (fn []
      [:div.tooltip-controller.js-tooltip-controller
       [:button
        {:on-click #(swap! display-tooltip? not)}
        "spawn tooltip"]
       (when @display-tooltip?
         [tooltip display-tooltip?])])))