CODEWITHSUNDEEP
reactjstwitter-bootstrap-tooltipreact-bootstrap
Swamy g
Swamy g

Reputation: 2166

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

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:

React Boostrap Tooltip example

How can I fix this problem?

Upvotes: 2

Views: 9887

Answers (2)

mezod
mezod

Reputation: 2391

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.

Upvotes: 8

Gabriel
Gabriel

Reputation: 127

The tooltip has a "container" (just like the original bootstrap component that you can set). By default it is the body. Try to play a bit with this option. I can't tell from what you provided what value you should use.

Upvotes: 1

Related Questions