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 に答える