Popovers and Tooltips not showin up properly on svg elements

[ptzolov]

I'm using this library with om, and the interop is quite nice. The only issue I've come across is is that popovers don't show up centered on the svg element.

example:

(defn offnet-segment
  [app owner]
  (reify
    om/IRenderState
    (render-state [this {:keys [translate scale width control-chan
                                rx ry cursor title data-content]}]
      (dom/g #js {:stroke "black"
                  :transform (str "translate(" translate ") scale(" scale ")")
                  :width width}
             (ReactBootstrap/OverlayTrigger #js {:trigger "click"
                                                 :placement "top"
                                                 :overlay (ReactBootstrap/Popover #js {:title "ID"}
                                                                                  "DESCRIPTION")}
                                            (dom/g nil
                                                   (dom/rect #js {:className "path-element"
                                                                  :x 600
                                                                  :y 120
                                                                  :rx rx
                                                                  :ry ry
                                                                  :width width
                                                                  :height 70
                                                                  :fill "#0c60b7"})
                                                   (dom/text #js {:className "ne-text submit-button"
                                                                  :x (+ 600 (/ width 2))
                                                                  :y 175
                                                                  :fill "white"} "Test")))))))

Example:

The popover should be centred over the svg rectangle.

[pieterv]

Thanks for the issue looks like a bug with our svg support. It seems offsetWidth isn't supported by all browsers on svg elements, looks like we might need to use getComputedStyles to get the width in those cases. See a similar issue: https://github.com/mootools/mootools-core/pull/2602/files.

@ptzolov Awesome to hear react-bootstrap works well with Om, let us know if there is anything we can do Om interop better.

[taion]

Superseded by #1050.