css - 在工具提示中设置填充

Question

整个元素都有很多工具提示和一个通用的 CSS 文件。

主.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; 是倒置的，第一个用于顶部/底部，因此您无需设置左右填充。它在某些情况下有效，因为您将宽度设置为 120px。

因此您应该将填充反转为 padding: 0 5px; 或在四个边使用完整填充:padding: 5px; 并转换您的 width: 120px ; 到 min-width: 120px; 如果你一直想要相同的填充，则将其删除。