html - 将工具提示添加到 Bootstrap 进度条

Question

我想在 Bootstrap 的 progress bar 中添加工具提示.但是，我需要它是一个纯 CSS 工具提示。

我正在使用 hint ，但似乎不起作用；我猜某处有冲突。

这是工具提示 css，它适用于 div 和所有其他东西，而不是 progress-bars

/**
 * def tooltip
 */
.hint--def:before {
    border-bottom-color: #FFFFFF;}
.hint--def:before {
    margin-top: -12px; }
.hint--def:after {
    margin-left: -18px; }
.hint--def:before, .hint--def:after {
    border:1px solid #cccccc;
    color:#6c6c6c;
    top: 100%;
    left: 50%; }
.hint--def:hover:after, .hint--def:hover:before, .hint--def:focus:after, .hint--def:focus:before {
    -webkit-transform: translateY(0px);
    -moz-transform: translateY(0px);
    transform: translateY(0px); }

/**
 * Info
 */
.def:after {
    color:black;
    background-color: #FFFFFF;
    text-shadow: 0 0px 0px #193b4d;
}
.def.hint--bottom:before {
    border-bottom-color: #FFFFFF; }

Answer 1

只要工具提示 HTML 在目标内，您就可以向任何 HTML 元素添加简单的 CSS 工具提示。

例如:

<span class="tooltip-target">
    Hover over me
    <span class="tooltip-content">I am the tooltip!</span>
</span>

.tooltip-target { position: relative; }

.tooltip-content { 
     display: none; 
     position: absolute;
     left: 50%;
     top: -10px; // set this whatever you want
}

.tooltip-target:hover .tooltip-content {
    display: block;
}

您可以花点心思，将不透明度与 CSS3 过渡结合使用，而不是切换显示以获得更平滑的效果。