Question

我尝试过仅限CSS的工具提示。但是，最小宽度属性无法正常工作。我需要较小的文字作为宽度最小。如果我更改CSS代码min-width 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标记内无效。尝试将标记更改为：

<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

Answer 2

我花了一段时间，但这里是清理过的代码。我希望这是值得的。

您使用的标记无效并且不利于您的网站。：）

DEMO

以下是更好的格式化CSS工具提示的示例。

尺寸将是其内容的大小。
不小于最小值。
不大于最大值。

<强> HTML

<div class="wrapper">  
    <img src="1.png"></img>
    <div class="tooltip"><span>1. A small tooltip.</span></div>
</div>

<强> CSS

.wrapper {
    position: relative;
}
.tooltip{
    position: absolute;
    left: 0;
    z-index: 1;
    display:none;
    width: 500px; /*this is max width. It's invisible */
}
.tooltip span {
    background: #ffffe1;
    border-radius: 4px;
    border: 1px solid #DCA;
    box-shadow: 5px 5px 8px #ccc;
    bottom: 33px;
    color: #000;
    content: attr(title);
    display: block;
    left: 3px;
    padding: 14px;
    position: absolute;
    z-index: 98;
    font: 12px Arial, Helvetica, sans-serif;
    line-height: 16px;
    display:block;  
}
.tooltip span:before,
.tooltip span:after{
    position: absolute;
    content: "";
    border: solid;
}
.tooltip span:before {
    border-color: rgba(255, 255, 225, 1) transparent;
    border-width: 14px 16px 0px 0px;
    bottom: -11px;
    display: block;
    left: 15px;
    z-index: 1;
}
.tooltip span:after {
    border-color: #DCA transparent;
    border-width: 13px 15px 0px 0px;
    display: block;
    left: 14px;
    bottom: -13px;
    z-index: -1;
}
.wrapper:hover > .tooltip {
    display:block;
}

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

2 个答案:

DEMO