带有Tooltip文本的Bootstrap表不包装

I have a tooltip is in responsive table. However, I realised the text inside the tooltip is not wrapping it nicely in mobile view only.

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

Please see example here: http://www.bootply.com/4fFLE90WAl# You need to render the mobile view and mouseover and see the issue

请参阅此处的示例：http：//www.bootply.com/4fFLE90WAl#您需要呈现移动视图和鼠标悬停并查看问题

3 个解决方案

#1

Add this to your CSS

将其添加到您的CSS中

.tooltip-inner  {

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

}

And it will work like a charm. They key attribute here is white-space. Read more about it here

它会像魅力一样起作用。它们的关键属性是白色空间。在这里阅读更多相关信息

#2

I resolved it by adding this line "data-container="body"

我通过添加这行“data-container =”body来解决它

So it looks like that now

所以它现在看起来像那样

<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>

Is it ok? Or the solution provided by Hristo is a better one?

可以吗？或者Hristo提供的解决方案更好？

#3

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