Html “最小宽度”属性工作不正常

我尝试了CSS唯一的工具提示。但是，“最小宽度”属性无法正常工作。我需要更小的文本作为最小宽度。如果我更改CSS代码min width 100px，较大的文本工具提示也会减少到100px，如width属性。请帮我查一下密码

这是我的代码（请参阅）：

---

您的问题似乎是

span

元素嵌套在

a

标记中。。。据我所知，在

a

标记中嵌套块元素是无效的。尝试将标记更改为：

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

---

检查

我花了一些时间，但这是清理后的代码。 我希望这是值得的努力

您使用的标记无效，对您的网站不好。：）

下面是一个格式更好的仅CSS工具提示的示例

• 大小将是其内容的大小
• 不得小于最小值
• 不能大于最大值

HTML

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

---

您可能需要限制

最大宽度

，而不是

最小宽度

。请澄清您想要什么achieve@Obsidian我希望工具提示的宽度为100px，例如，如果没有文本，但是如果文本太多，则宽度为500pxmax@Obsidian我需要的是工具提示的大小将取决于内容写在里面。如果你在小提琴上使用精确的标记，或者在html5中如何构造表的例子，

a

标记中的嵌套块元素是有效的，我可以帮你-请看这篇文章：@Danield根据这些评论似乎是可能的..我找不到html5规范中讨论这一点的那一行。但在这种情况下，问题似乎出在JSFIDLE不适用于HTML5或者需要一行doctype。

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

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

.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;
}