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")

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