CSS错误工具提示无法正常工作

时间：2017-11-26 07:39:53

标签： html css

我从here获得了工具提示的一般CSS代码，但尝试根据我的需要定制它：

/* The tooltip stuff */
.tooltip
{
    top: -5px;
    z-index: 1;
    display: inline-block;
    width: 200px;
    background-color: #e55;
    padding: 5px 0;
    position: absolute;
    color: #fff;
    border-radius: 6px;
    margin-left: 6px;
}


.tooltip::after
{
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #e55 transparent transparent;
}

然而，出于某种原因，当我使用虚拟工具提示对其进行测试时，它不仅缺少箭头，而且甚至不在需要它的行上！更糟糕的是，由于某些原因，工具提示相互搭配！

enter image description here

主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;
}

我一直尝试使用它一段时间，但无法获得正确定位的工具提示，也无法让它们彼此不在一起。

1 个答案:

答案 0 :(得分：1)

虽然在包含元素上声明了position: relative，但是另外声明的overflow: auto属性可以防止元素内容溢出，因此无法正确观察工具提示。< / p>

解决此问题：

  1. 删除嵌套元素上声明的float: left规则 遵循以下规则：#newUserRegistration > * > * - 全球 此规则的选择器（*）在这种情况下会造成严重破坏，并且应该 为了更好的做法，请避免使用更多特定的选择器和 只设计您需要的样式。

  2. 仅使用更具体的选择器浮动您的表单字段 right， 例如：

    #newUserRegistration select, #newUserRegistration input {
    float: right;
}
  3. 您不再需要使用overflow: auto清除浮动广告 包含父元素，允许您绝对定位 工具提示保持可见。此外，您的工具提示中还添加了left定位属性。

    4. Updated JSFiddle

    代码段示范： 

    /* The tooltip stuff */
.tooltip
{
    top: -5px;
    left: 100%; /* Added - position absolute tooltip relative to parent row */
    z-index: 1;
    display: inline-block;
    width: 200px;
    background-color: #e55;
    padding: 5px 0;
    position: absolute;
    color: #fff;
    border-radius: 6px;
    margin-left: 6px;
}


.tooltip::after
{
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent #e55 transparent transparent;
}

/* 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;
    position: relative;
    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 > * > * /* this is causing mayhem, selectors should be more specific */
{
    float: left;
}

/* ...like this */
#newUserRegistration select, #newUserRegistration input {
    float: right;
}
#newUserRegistration label {
    float: none;
}

#newUserRegistration > * > *:not(:first-child):not([type="submit"]):not([type="reset"]):not(button)
{
    margin-left: -4px;  
}

/* not necessary, since you no longer need to clear nested elements that are floated
#newUserRegistration span
{
    overflow: auto;
} */
    <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>                   
            
        </span>
        <span class="rowTight">
            <label for="lastName" class="half">Last name</label>
            <input type="text" id="lastName" class="half" />
            <span class="hidden tooltip"></span>                    
            
        </span>
        <span class="rowTight">
            <label for="empIDNumber" class="half">Employee ID number</label>
            <input type="text" class="number half" />
            <span class="tooltip">other text</span>     
            
        </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>    
            
        </span>
        <span class="rowTight">
            <label for="username" class="half">Username</label>
            <input type="text" id="username" class="half" />
            <span class="hidden tooltip"></span>    
            
        </span>
        <span class="rowTight">
            <label for="password" class="half">Password</label>
            <input type="text" id="password" class="half" />
            <span class="hidden tooltip"></span>    
            
        </span>
        <span class="rowTight">
            <label for="confirmPassword" class="half">Confirm password</label>
            <input type="text" id="confirmPassword" class="half" />
            <span class="hidden tooltip"></span>
            
        </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>
            
        </span>
        <span class="right row buttonRow">
            <input type="submit" class="right" value="Submit" />
            <input type="reset" class="right" value="Clear"/>
        </span>
    </form>
</div>

相关问题
最新问题