reactjs - 在 DOM 上显示之前如何定位和调整 React Bootstrap 工具提示的大小？

Question

我有一个 react 引导工具提示，除非我靠近窗口的边缘，否则效果很好。在那种情况下，我希望工具提示不会被截断，而是调整大小以适应全文并在所有边上都有边框。

我还希望工具提示箭头指向触发元素的正上方(在我的例子中是“i”图标)。

我的猜测是，一旦呈现了 ReactBootstrap.Tooltip，这就需要使用 DOM。我需要能够计算它的当前大小和窗口顶部和左侧的偏移位置，然后重新定位/调整它的大小。

这是我当前的代码(在 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'
        )
  )

这是问题的截图:

我该如何解决这个问题？

Answer 1

当我的触发器靠近窗口右侧时，我遇到了同样的问题。我通过将 .popover 类的最大宽度覆盖为以下内容来修复它:

.popover{
  max-width: none;
}

并为弹出框内的元素定义宽度。