Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Tooltip using React's lifecycle methods
(defn find-tooltip-controller-class [node]
(or (some-> node
(.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)))]
{:reagent-render (fn []
[: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 []
{:on-click #(swap! display-tooltip? not)}
"spawn tooltip"]
(when @display-tooltip?
[tooltip display-tooltip?])])))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment