3

我正在使用绝对位置（想想工具提示）在另一个元素内定位仅包含文本的元素。

Tooltip 元素的宽度应根据其文本内容的最大宽度来确定 - 有时它只是一个单词，有时是多行。
我需要能够设置工具提示元素的左对齐位置并将其移动到包含框之外。

这是标记：

<div class="container">
    <div class="tooltip">Sed venenatis diam ligula, at sagittis arcu blandit in.</div>
</div>

这是CSS：

.container {
    position:relative;
    width:100%;
    height:100px;
}
.tooltip {
    position:absolute;
    top:0;
    left:0;
    max-width: 150px;
    padding: 20px;
}

现在，只要我将 Tooltip 元素移向其容器的右边缘，它就会收缩以适合该容器。

这是一个说明问题的交互式小提琴：http: //jsfiddle.net/meyertee/GKFXN/

是否有一种纯 CSS 方法可以使 Tooltip 元素在右侧的行为与在左侧的行为一样 - 即使其自身与文本希望的一样宽？

4

4 回答 4

1

使用 CSS 变换： translate(x, y) 而不是 left: x。http://jsfiddle.net/jYKrS/

$("#positionSlider").slider({
    value: 0,
    min: 0,
    max: 150,
    step: 1,
    slide: function (event, ui) {
        $(".tooltip").css("transform", "translate(" + ui.value + "%, 0)");
    }
});

您可能必须添加所有前缀版本以获得更好的兼容性。

transform: translate(x, y);
-webkit-transform: translate(x, y);
-moz-transform: translate(x, y);
-ms-transform: translate(x, y);
-o-transform: translate(x, y);
于 2013-08-05T17:19:54.353 回答
1

不知道你想如何使用工具提示很难清楚地回答。

如果您不想将它移到框外的右侧，并且框不会变粗，您可以使用right: -10px而不是left: ___px;

另一种方法是使用white-space: nowrap. 这样您可以使用定位，left但它会强制您手动添加换行符（我认为这不是一个选项）。

最后，我认为使用 jQuery 你已经知道答案了。它可能是这样的：

$.each(".tooltip", function() { // Or on display
    $(this).css("min-width", $(this).width());
});
于 2013-08-05T16:55:06.867 回答
0

如何使用 jQuery 将工具提示最小宽度设置为原始宽度？

我刚刚将其添加到 javascript 中：

$('.tooltip').css('min-width',$('.tooltip').width());

http://jsfiddle.net/meyertee/GKFXN/

于 2013-08-05T17:06:04.207 回答
0

也许把它放在工具提示 CSS 中。

.tooltip {
    min-width: 150px;
}

这是另一个版本，它使用 js if 语句来获得基本相同的结果

http://jsfiddle.net/GKFXN/56/

于 2013-08-05T17:10:17.237 回答