html - 最小宽度属性无法正常工作

Question

我试过仅使用 CSS 的工具提示。但是，Min-width 属性无法正常工作。我需要最小宽度的较小文本。如果我更改 CSS 代码最小宽度 100px，较大的文本工具提示也会减少到 100px，如 width 属性。请帮助我的代码。

这是我的代码(参见 http://jsfiddle.net/5p3teu5b/2/ ):

.tooltip {
    display: inline;
    position: relative;
}

.tooltip:hover {
    color: #000;
    text-decoration: none;

}

.tooltip:after {
    background: #ffffe1;
    border-radius: 4px;
    border:1px solid #DCA;
     box-shadow: 5px 5px 8px #ccc;
    bottom: 28px;
    color: #000;
    content: attr(title);
    display: block;
    left: 1em;
    padding:9px 8px 9px 8px;
    position: absolute;
    z-index: 98;
    min-width:200px;
    max-width:500px;
    font: 12px Arial, Helvetica, sans-serif;
    line-height:16px;   
}

.tooltip:before {
    border: solid;
    border-color: rgba(255,255,225,1) transparent;
    border-width: 15px 15px 0px 0px;
    bottom: 1em;
    content: "";
    display: block;
    left: 2em;
    position: absolute;
    z-index: 99;    
}

Answer 1

您的问题似乎是 span 元素嵌套在 a 标记内...据我所知，在 a 内嵌套 block 元素是无效的 标签。尝试将您的标记更改为:

<div>
  <a href="#" class="tooltip"><img src="1.png"></a>
  <span><p>Lorem Ipsum is simply text</p></span>
</div>

你的 CSS 相对于 div 并使用 + 到 hover:

div {
    position:relative;
}
.tooltip:hover + span {
    display: block;
}

检查 UpdatedFiddle