Quick tooltip spike

app.cljs

(defn tooltip-handler
  "This method listens for mouse over/out events and injects the DOM with an HTML element"
  [{:keys [data]} event]
  (let [position (-> event .-target .getBoundingClientRect)
        width (.-width position)
        height (.-height position)
        x (+ (.-left position) 20)
        y (.-top position)
        output data]
    (if-not (= data nil)
      (-> js/document
        (.getElementById "tooltip-container")
        (.-innerHTML)
        (set!
         (str "<div class=\"global-tooltip\" style=\"top: " y "px; left: " x "px;\">" output "</div>")))
      (-> js/document
        (.getElementById "tooltip-container")
        (.-innerHTML)
        (set!
         (str ""))))))

(defn some-component 
  "This is a useless component for this example. On-mouse-over `tooltip-handler` is called and passed some data."
  []
  [:div {:on-mouse-over #(tooltip-handler {:data (html [:div "demo"])} %)}])

(defn tooltip-container []
  [:div {:id "tooltip-container")

I know this is just a sample, too, but still it's best to use every possible line to learn from. Rather than embedding the container id in the handler function, it should be passed in as an argument for flexibility. And there's one more cool interop macro that in this case will only save you 2 characters, but at other times is even more useful:

Before:

(let [position (-> event .-target .getBoundingClientRect)] 
  ...)

After:

(let [position (.. event -target getBoundingClientRect)] 
  ...)

Let's have a chat about some of this over running code. There's lots more fun stuff to explore!