3

我正在尝试定位一个跨度，使其位于其兄弟姐妹之上并“悬停”或定位在其父代之上。父级相对定位。

请查看我的小提琴以获得整个图片

它现在的样子...

在此处输入图像描述

这就是我想要的样子... 在此处输入图像描述

跨度（工具提示）：

.grid-window span.validation-message:after {
    border-color: #F2DEDE transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    height: 0;
    left: 0;
    position: absolute;
    top: 40px;
    width: 0;
}
.grid-window span.validation-message {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    height: 20px;
    left: 263px;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    top: -26px;
    width: 100px;
}

父元素：

element.style {
    display: block;
    height: auto;
    left: 488px;
    outline: 0 none;
    top: 100px;
    width: 400px;
    z-index: 1002;
}
.ui-dialog {
    overflow: visible;
    padding: 0.2em;
    position: absolute;
    width: 300px;
}

更新

正如 Rohrbs 所建议的，如果我明确设置跨度的宽度（工具提示），那么它确实会挂在表单上。但这并不实用，因为每个工具提示都可能显示不同的消息。所以我的问题现在变成了 -如何将宽度设置为动态并且仍然让跨度（工具提示）悬在表单上？

4

5 回答 5

1

如果你width在课堂.grid-window span.validation-message上手动设置width: 50%;它会像你想要的那样挂在边缘。您只需保持消息足够短以确保正确安装。

于 2013-04-05T15:37:56.213 回答
1

将您的样式.grid-window .control-group .controls设置为position: relative;只有您的绝对定位.grid-window span.validation-message才能按您的意愿工作。

看到这个小提琴

更新 您想成为您的工具提示宽度变量，因此我已经替换了position: absolute;to position: relative;in.grid-window span.validation-message并添加了left: 175px; top: -25px; float: left;width min-width: 0; max-width: 500px;: auto; 也工作。使这项工作如你所愿。注意浮动是必须的，否则它将不起作用。

所以，主要的变化（最重要的部分）是float: left; position: relative;，.grid-window span.validation-message你也不需要position: relative;声明.grid-window .control-group .controls

看到这个小提琴

于 2013-04-12T13:06:26.957 回答
0

在.ui-dialog .ui-dialog-contentDIV 上，只需将溢出从自动更改为可见，这将有所帮助

于 2013-04-05T14:05:34.453 回答
0

我设法解决了您的问题，只需对您的 CSS 和 HTML（类名）进行细微更改。

您可以通过更新的小提琴查看结果：http: //jsfiddle.net/aNkSw/16/

我为每个跨度添加了一个不同的类，并且仅将这个 CSS 位调整为：

.grid-window span.validation-message-id:after, .grid-window span.validation-message-name:after {
    border-color: #F2DEDE transparent transparent;
    border-style: solid;
    border-width: 8px;
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    bottom: -16px;
    left: 10px;
}
.grid-window span.validation-message-id {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
    padding: 10px;
    position: absolute;
    margin: -81px 0 0 0;
    left: 292px;
    z-index: 99;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    width: 200px;
}
.grid-window span.validation-message-name {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    line-height: 20px;
    overflow: visible;
    padding: 10px;
    position: absolute;
    margin: -41px 0 0 0;
    left: 292px;
    z-index: 99;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    width: 200px;
}

我不能说我同意你如何编码整个事情。

于 2013-04-09T18:07:12.183 回答
0

如果你可以使用一个额外的元素，这是一个我经常使用这种定位的解决方案：HTML：

<div class="validation-message-wrapper">
<span class="validation-message" style="">Please enter a number</span>
</div>

CSS：

.validation-message-wrapper {
    width:0;
    position: absolute;
    right: 70px;
    top: 0;
    height: 0;
}

线索是创建一个大小为零的参考点 ( the .validation-message-wrapper) 将其定位在您想要的位置，然后将您的元素相对于它定位。

这是一个工作演示：DEMO

我还做了一些其他小的 CSS 更改，只是为了稍微调整一下：

 .ui-dialog .ui-dialog-titlebar {
    padding: 0.4em 1em;
    position: relative;
}

.grid-window span.validation-message:after {
    border-color: #F2DEDE transparent transparent;
    border-style: solid;
    border-width: 8px;
    content:"";
    height: 0;
    left: 0;
    bottom: -16px;
    position: absolute;
    width: 0;
}
.grid-window span.validation-message {
    background: none repeat scroll 0 0 #F2DEDE;
    border: 1px solid #EED3D7;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 1px 1px 2px 0 rgba(0, 0, 0, 0.098);
    color: #B94A48;
    font-size: 14px;
    height: auto;
    left: 0px;
    bottom: 0;
    line-height: 20px;
    padding: 10px;
    position: absolute;
    text-align: center;
    text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.098);
    margin-top: -40px;
    width: 200px;
}

我希望这会有所帮助。

如果您想要更通用的东西，我制作了一个 jQuery 工具提示插件 ( tipy )，它非常易于使用和实现。

于 2013-04-15T11:24:24.563 回答