-3
を働いていない私はhereからツールヒントのための私の一般的なCSSコードを得たが、私のニーズに合わせて仕立ててみましたダミーのツールチップ、それは矢印が欠けているだけでなく、それはそれを必要とする行にさえありません！さらに悪いことに、ツールチップは、何らかの理由で、お互いの上に座っています！CSSエラーツールチップが正しく
次のようにメインのdivにHTMLコードは次のとおりです。
<div class="main pageCenter">
<form id="newUserRegistration">
<span class="row">
<label for="firstName" class="half">First name</label>
<input type="text" id="firstName" class="half">
<span class="tooltip">text</span>
</input>
</span>
<span class="rowTight">
<label for="lastName" class="half">Last name</label>
<input type="text" id="lastName" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="empIDNumber" class="half">Employee ID number</label>
<input type="text" class="number" class="half">
<span class="tooltip">other text</span>
</input>
</span>
<span class="rowTight">
<label for="dept" class="half">Department</label>
<select id="dept" class="half">
<!-- To be populated with data from a Mustache template-->
{{#departments}}
<option id="{{departmentHTMLID}}">{{departmentName}}</option>
{{/departments}}
</select>
<span class="hidden tooltip"></span>
</span>
<span class="rowTight">
<label for="manager" class="half">Manager name</label>
<input type="text" id="manager" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="username" class="half">Username</label>
<input type="text" id="username" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="password" class="half">Password</label>
<input type="text" id="password" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="confirmPassword" class="half">Confirm password</label>
<input type="text" id="confirmPassword" class="half">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="rowTight">
<label for="email" class="half" title="A confirmation email will be sent to this e-mail address.">E-mail address</label>
<input type="email" class="half" title="A confirmation email will be sent to this e-mail address.">
<span class="hidden tooltip"></span>
</input>
</span>
<span class="right row buttonRow">
<input type="reset" class="right" value="Clear"/>
<input type="submit" class="right" value="Submit" />
</span>
</form>
</div>
と、次のように私のCSSコードの残りの部分は次のとおりです。
/* Fractional-width classes */
.fiveSixths { width: 83.3333333333333333%; }
.fourFifths { width: 80%; }
.threeFourths { width: 75%; }
.twoThirds { width: 66.6666666666666667%; }
.threeFifths { width: 60%; }
.half { width: 50%; }
.twoFifths { width: 40%; }
.third { width: 33.3333333333333333%; }
.fourth { width: 25%;}
.fifth { width: 20%; }
.sixth { width: 16.6666666666666667%; }
.main
{
border: 2px solid orange;
border-radius: 5px;
box-shadow: 0px 0px 100px orange;
}
.main > *
{
padding: 10px;
}
.pageCenter
{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="text"],input[type="password"], input[type="email"]
{
border-left-style: none !important;
border-right-style: none !important;
border-top-style: none !important;
border-bottom-color: #888 !important;
}
input[type="submit"],input[type="reset"],button
{
height: 25px;
width: 100px;
border-width: 1px;
border-radius: 3px;
}
input[type="submit"]
{
background-color: orange;
border-color: orange;
}
input[type="submit"]:hover
{
background-color: #fb0;
}
.hidden
{
display: none;
visibility: hidden;
}
.row:not(.buttonRow),.rowTight:not(.buttonRow)
{
display: block;
width: 100%;
}
.row
{
margin-top: 10px;
margin-bottom: 10px;
}
.rowTight
{
margin-top: 5px;
margin-bottom: 5px;
}
.right
{
float: right;
}
.number
{
text-align: right;
}
.main
{
min-width: 450px;
width: 50%;
}
#formContainer
{
padding: 20px;
}
#newUserRegistration > *:not(input[type="submit"])
{
width: 100%;
overflow: hidden;
}
#newUserRegistration > * > *
{
float: left;
}
#newUserRegistration > * > *:not(:first-child):not([type="submit"]):not([type="reset"]):not(button)
{
margin-left: -4px;
}
#newUserRegistration span
{
overflow: auto;
}
私がしようとしてきましたこれをしばらくプレイすることはできますが、ツールのヒントを適切に配置することや、互いの上に重ならないようにすることはできませんでした。
あなたは何を期待したのですか？あなたは 'position：absolute'を使用しています... –
リンクされたサンプルをもう一度チェックしてください - スキームは：tooltip 'container'は相対的な位置にあり、ツールチップは自己絶対的です。それはあなたの問題を解決するはずです。 – sinisake
'.rowTight'要素を含むツールチップに' relative'の位置を宣言します。 – UncaughtTypeError