Question

项目中有许多工具提示和一个常见的CSS文件。

的main.css：

/* Tooltip container */ .uibTooltip {
    position: relative;
    display: inline-block; }

/* Tooltip text */ .uibTooltip .uibTooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

   /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

   /* Fade in tooltip */
    opacity: 0;
    transition: opacity 0.3s; }

/* Tooltip arrow */ .uibTooltip .uibTooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left:  -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; }

/* Show the tooltip text when you mouse over the tooltip container */ .uibTooltip:hover .uibTooltiptext {
    visibility: visible;
    opacity: 1; }

Angular模板中的用法：

<span class="uibTooltip">
 <i style="font-size:13px" class="fa">&#xf05a;</i>
  <span class="uibTooltiptext">Sample Tag</span>
</span>

但是对于不同的文本，工具提示中会显示不同的填充。有些是完美的，而其他文本只是在边境。

Answer 1

您的CSS padding: 5px 0;被反转，第一个是顶部/底部，因此您不需要设置左右填充。它在某些情况下有效，因为你将widht设置为120px。

因此，您应该将填充转换为padding: 0 5px;或使用四边的完整填充：padding: 5px;并将width: 120px;转换为min-width: 120px;或删除它（如果您需要）填补所有时间。

在工具提示中设置填充

1 个答案: