OverlayTrigger似乎将输入字段添加到ToggleButton

Question

使用react-bootstrap，我有一些ToggleButtons，我想向其中添加一个工具提示，以显示其整个文本（如果它们太长，则显示当前内容...）。 从根本上来说，这是绝对可以的。 虽然我可以为每个按钮添加一个标题，但我希望有一个Bootstrap样式的工具提示，因为它看起来更好。

在添加“覆盖”触发器时，我的按钮上方似乎有一个可见的“输入”框，其中包含该值（而不是按钮的内容）。该按钮似乎也不再起作用，其状态被错误地确定，似乎我正在认真地做某事。

谢谢您的帮助

我在下面列出了我的代码。我已经尝试按照react-bootstrap网站上的样式使用自定义Div，并且尝试更改Overlay上的触发器。

以下代码正常运行

<ToggleButton variant="outline-dark" key={valueKey} value={'The Button Value'} style={style} onChange={this._filterButtonChange} >{'My Button without Overlay'} </ToggleButton>

以下代码给出了相当奇怪的结果

<OverlayTrigger placement={'right'} trigger={'hover'}
    overlay={<Tooltip>Tooltip on <strong>{'right'}</strong>.</Tooltip>}>
    <ToggleButton variant="outline-dark" key={valueKey} value={'The Button Value'} style={style} onChange={this._filterButtonChange} >{'My Button without Overlay'} </ToggleButton>

</OverlayTrigger>

在添加OverlayTrigger之前

添加OverlayTrigger后