Boottrap表与工具提示文本没有包装

Question

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

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

Answer 1

将此添加到 CSS

.tooltip-inner  {

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

}

它会像魅力一样发挥作用。它们的关键属性是white-space。详细了解 here

Answer 2

我通过添加这一行来解决这个问题＆＃34; data-container =＆＃34; body＆＃34;

所以现在看起来像

<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提供的解决方案更好？

Answer 3

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