Question

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

我正在使用hint，但它似乎不起作用;我猜测某处存在冲突。

这是工具提示css，适用于div和所有这些，机器人不在progress-bar s

/**
 * 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过渡而不是切换显示以获得更平滑的效果。

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

1 个答案: