0

我的问题是我无法真正正确定位工具提示尾部。我有一个生成提示的插件，可以定位在 4 个不同的位置：顶部、底部、左侧、右侧。我需要将尾巴定位在每个提示的中心顶部/左侧/底部/右侧。

我尝试使用这样的css：

.ui-hint{
    display: block;
    position: absolute;
    min-width: 50px;
    max-width: 200px;
    min-height: 25px;
    background: #FDD10B;
    padding: 15px;
    color: #000000;
    font-size: 16px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

.ui-hint-left:before{
    position: absolute;
    z-index: 9998;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 20px solid #FDD10B;
    border-bottom: 15px solid transparent;
    right: -15px;
    top: 25%;
}

.ui-hint-right:before{
    position: absolute;
    z-index: 9998;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-right: 20px solid #FDD10B;
    border-bottom: 15px solid transparent;
    left: -15px;
    top: 25%;
 }

.ui-hint-top:before{
    z-index: 9998;
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 20px solid #FDD10B;
    left: 42%;
    bottom: -15px;
}

.ui-hint-bottom:before{
    z-index: 9998;
    position: absolute;
    content: '';
    display: block;
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 20px solid #FDD10B;
    left: 42%;
    top: -15px;
}

我适用于标准高度/宽度提示，但如果它们变大，工具提示会因为混乱的百分比而发生变化。也许我可以使用js/jquery（附加一个元素）以某种方式做到这一点？将不胜感激任何输入。

4

1 回答 1

1

最简单的方法是使用新的弹性盒子，但它还没有得到广泛的支持。如果您必须支持 IE，那么它不是一个选项。

javascript 将是下一步。您可以将元素设置为visibility: hidden它将布局，并且可以计算正确的高度/宽度。用JS设置位置。

老式的选择是 CSS hack。您可以有一个 wrap 元素（或 a :before { content:''}），将宽度设置为 100%，然后左：50%。包含工具提示的内部元素设置为左：-50% 将其移回中心，然后将边距或填充偏移到工具提示图标宽度的一半。这是一个例子： http: //matthewjamestaylor.com/blog/beautiful-css-centered-menus-no-hacks-full-cross-browser-support。它不漂亮，但旧的 CSS hack 都不是。

于 2013-10-25T05:11:02.090 回答