2

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

我还希望工具提示箭头指向触发元素的正上方（在我的例子中是“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'
        )
  )

这是问题的屏幕截图：

React Boostrap 工具提示示例

我该如何解决这个问题？

4

2 回答 2

8

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

.popover{
  max-width: none;
}

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

于 2016-01-21T15:50:37.917 回答
1

工具提示有一个“容器”（就像您可以设置的原始引导组件一样）。默认情况下，它是正文。试着用这个选项玩一下。我无法从您提供的内容中看出您应该使用什么价值。

于 2015-04-14T09:45:31.737 回答