How to position and resize React Bootstrap Tooltip before displaying it on the DOM?

Question

I have a react bootstrap tooltip that works well unless I'm close to the edges of the window. In that case I want the tooltip not to be cut off but resized to accomadate the full text and have borders on all sides.

I also want the tooltip arrow to point just above the trigger element (in my case the 'i' icon).

My guess is that this requires working with the DOM once the ReactBootstrap.Tooltip has been rendered. I need to be able to calculate it's current size and window top and left offset positions and then re-position/re-size it.

Here's my current code (in CoffeeScript):

define [
  'jquery',
  'es6-shim',
  'react',
  'react-bootstrap'
], ($, _shim, React, ReactBootstrap) ->

  {div, i, h2} = React.DOM

  ToolTipHint = React.createFactory(
    React.createClass

      render: ->
        tooltip = ReactBootstrap.Tooltip className: 'hint-content',
          h2 className: 'hint-title', @props.fieldName
          div className: 'hint-text', @props.tooltip

        ReactBootstrap.OverlayTrigger(
          trigger: ['hover']
          placement: 'top'
          overlay: tooltip
          delayShow: 300
          deplayHide: 150,
            div className: 'hint-icon-container',
              i className: 'gg-icon-tooltip hint-icon'
        )
  )

And here's the screenshot of the problem:

How can I fix this problem?

Answer 1

I had this very same problem when my trigger was close to the right side of the window. I fixed it by overwriting the max-width of the .popover class to:

.popover{
  max-width: none;
}

and defining a width to the element inside the popover.