带有工具提示文本的引导表不换行答案

【问题标题】：Bootstrap table with Tooltip text not wrapping带有工具提示文本的引导表不换行
【发布时间】：2014-06-03 02:21:38
【问题描述】：

我有一个工具提示在响应表中。但是，我意识到工具提示中的文本并没有很好地仅在移动视图中包装它。

请在此处查看示例：http://www.bootply.com/4fFLE90WAl# 您需要渲染移动视图和鼠标悬停并查看问题

【问题讨论】：

标签： css twitter-bootstrap mobile tooltip

【解决方案1】：

将此添加到您的 CSS

.tooltip-inner  {

    white-space:pre; /* you can also try white-space: normal; */
    max-width:none;

}

它会像魅力一样发挥作用。他们这里的关键属性是white-space。了解更多信息here

【讨论】：

嗨，Hristo，我通过添加这一行“data-container="body" 解决了这个问题。可以还是使用空白是更好的选择？
嘿！您的解决方法真的很棒，因为您没有覆盖任何东西，但是您正在使调整依赖于引导程序。虽然这不是一件坏事，但它可能会出错，因为规则的行为可能会在引导程序的未来版本中发生变化（它有之前发生过其他设置），您可能必须找到再次修复它的方法。这个选择由你。目前这两个选项都运行良好。
感谢@Hristo 的确认！ :)

【解决方案2】：

我通过添加这一行“data-container="body"

解决了这个问题

现在看起来是这样的

<a href="#" data-toggle="tooltip" data-container="body" data-placement="right" data-html="true" title="this paragraph is too long and the text does not wrap around in mobile view, i don't know why this is happening. please help">Hover over me</a>

没事吧？还是Hristo提供的解决方案更好？

【讨论】：

我用 jQuery 完成了这个： $("a[title]").each(function () { $(this).attr('data-container', 'body'); }) ;.效果很好！

【解决方案3】：

![.tooltip-inner{white-space:normal;}][1]

【讨论】：