Question

我的问题是我无法正确定位工具提示尾部。我有一个生成提示的插件，可以放在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（附加一个元素）以某种方式制作它？将欣赏任何意见。

Answer 1

最简单的方法是使用新的弹性盒，但目前还没有广泛的支持。如果你必须支持IE，那么这不是一个选择。

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

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

使用css / js / jquery进行工具提示尾部定位

1 个答案: