如何获得工具提示来使容器溢出？
[英]How do I get a tooltip to overflow a container?
问题描述
I have a basic tooltip css class I am using, The problem is, that the tooltip gets clipped by the container it is. 
我有一个正在使用的基本工具提示css类，问题是，工具提示被它所在的容器裁剪了。 Specifically I am using an angularJs UI Grid and the tool-tip item is in a cell. 具体来说，我正在使用angularJs UI网格，并且工具提示项位于单元格中。 The tool-tip does not draw outside of the cell. 工具提示不会在单元格外部绘制。 I have no idea what I need to change so this tool-tip will draw over everything and not be clipped. 我不知道我需要更改什么，因此此工具提示将覆盖所有内容而不会被裁剪。
I do have a sample that you can go to see this, if you go to: W3schools sample page 如果您要访问以下网站 ，我确实有一个示例可供您查看： W3schools示例页面
and put in the code: 并输入代码：
<!DOCTYPE html> <html> <head> <style> .con-tooltip { position: relative; } .con-tooltip:hover:before { border: 1px solid #fc0; padding: 3px 6px; background: #fffea1; content: attr(data-title); font-size: 1.7em; position: absolute; left: 0px; top: -26px; z-index: 999999; overflow: visible; } </style> </head> <body> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> </body> </html>
If you mouseover the top line of text you will see the tool-tip being clipped by the box, while the bottom line shows the full tool-tip. 如果将鼠标悬停在文本的顶行，您将看到工具提示被框裁剪，而底行显示了完整的工具提示。 What CSS do I need to make the top tooltip show without clipping? 我需要什么CSS才能显示顶部工具提示而不进行裁剪？
1 个解决方案
解决方案1
2 2015-07-17 14:16:48
The problem is that the tooltip has position absolute and high negative top. 问题在于工具提示具有绝对位置和较高的负顶位置。 You can set a smaller top like: 您可以设置一个较小的顶部，例如：
.con-tooltip { position: relative; } .con-tooltip:hover:before { border: 1px solid #fc0; padding: 3px 6px; background: #fffea1; content: attr(data-title); font-size: 1.7em; position: absolute; left: 0; top: -10px;/*set a smaller value for top*/ z-index: 999999; overflow: visible; }
<p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p>
After your comment I will try to solve your issue using white-space: nowrap; 发表您的评论后，我将尝试使用white-space: nowrap;解决您的问题white-space: nowrap; in class .con-tooltip : 在类.con-tooltip ：
.con-tooltip { position: relative; white-space: nowrap; } .con-tooltip:hover:before { border: 1px solid #fc0; padding: 3px 6px; background: #fffea1; content: attr(data-title); font-size: 1.7em; position: absolute; left: 0px; top: -10px; z-index: 999999; overflow: visible; }
<table> <tr> <td> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> </td> <td> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> </td> <td> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> </td> </tr> <tr> <td> <p class="con-tooltip" data-title="This is a tooltip">This is a paragraph.</p> </td> </tr> </table>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.