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

スタイルを.grid-window .control-group .controls設定するとposition: relative;、絶対的な位置のみ.grid-window span.validation-messageが必要に応じて機能します。

このフィドルを見る

更新 ツールチップの幅変数になりたかったので、position: absolute;toposition: relative;を置き換えて.grid-window span.validation-message追加し、 width: auto;left: 175px; top: -25px; float: left;も追加しました。min-width: 0; max-width: 500px;も働きます。あなたが望むようにこれを機能させるために。フロートする必要があることに注意してください。そうしないと機能しません。

したがって、主な変更点(最も重要な部分)はfloat: left; position: relative;toであり、宣言する.grid-window span.validation-message必要もありません。position: relative;.grid-window .control-group .controls

このフィドルを見る

于 2013-04-12T13:06:26.957 に答える
1

widthクラスで を手動で設定すると、必要に応じて端にぶら下がる.grid-window span.validation-messageと言いwidth: 50%;ます。適切な装備を確保するために、メッセージを十分に短くしておく必要があります.

于 2013-04-05T15:37:56.213 に答える
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;
}

手がかりは、ゼロ サイズの参照ポイント ( .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 に答える