hint.css 随内容扩展工具提示高度答案

【问题标题】：hint.css expand tooltip height with contenthint.css 随内容扩展工具提示高度
【发布时间】：2015-01-20 10:54:58
【问题描述】：

我正在使用HINT.css 进行工具提示，但看在上帝的份上，我无法让工具提示随内容一起扩展。我已经尝试过清晰的修复，设置高度等等，但无济于事。基本上我想说：

&:after
        content: attr(data-hint)
        background: $defaultColor
        color: white
        padding: $verticalPadding $horizontalPadding
        font-size: $fontSize
        line-height: $fontSize // Vertical centering.
        width: 150px
        min-height: 10px

然后 div 会随着内容一起扩展（基本上是为了防止越界情况）

<div class="hint" data-hint="Some very very very very very long tooltip going past 150px and should be multilined"></div>

【问题讨论】：

标签： html css

【解决方案1】：

在插件的CSS文件中，在伪元素后面的.hint类中添加如下两个CSS属性。

.hint:after
{
    width: 150px;
    white-space: pre-wrap;
    word-wrap: break-word;
}

【讨论】：

这不是诀窍。我可以用提示做一些恶作剧：after { display: block;位置：相对； } 但这会使 body 定位到箭头
您能否向我们展示您的问题的演示？另请参阅此类似问题：stackoverflow.com/questions/24310180/…

【解决方案2】：

您已设置 150 像素的固定宽度。尝试不使用宽度，或者如果您需要最小宽度，请使用 min-width。

【讨论】：

【解决方案3】：

我发现了与非常特定于领域的代码相关的问题，这些代码与hint.css 的结构方式交织在一起。我必须将hint.css 重写为自定义解决方案才能使其正常工作。

【讨论】：