負餘量導致懸停中斷

Question

爲什麼在懸停圖標時發生這種情況？看起來像是沒有得到在所有的時間元素懸停:|

我認爲問題是負邊際，但是奇怪，因爲該邊際不應該影響盤旋。

body{padding: 70px;} 
 
.pam{position: relative; padding: 0 70px; z-index:1;} 
 
.tooltips { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 7; 
 
    left: 0px; 
 
    bottom: 100%; 
 
    width: 400px; 
 
} 
 
.tbn{margin-left:-30px; margin-right: 30px; font-size: 24px;} 
 
.tbn:hover + .tooltips{ 
 
    display: block; 
 
} 
 
.tooltiptext { 
 
    font-size: 14px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    line-height: 1.2; 
 
    text-align: justify; 
 
    color: #525759; 
 
    border-radius: 2px; 
 
    padding: 10px; 
 
    position: relative; 
 
    background: #fff; 
 
    z-index: 1; 
 
    top: 100%; 
 
    display: block; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.22); 
 
    border-bottom: 1px solid #1a9edd; 
 
} 
 
.tooltiptext:after, 
 
.tooltiptext:before { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 10%; 
 
    border: solid transparent; 
 
    content: " "; 
 
} 
 
.tooltiptext:after { 
 
    border-top-color: #fff; 
 
    border-width: 14px; 
 
} 
 
.tooltiptext:before { 
 
    border-color: #1a9edd rgba(245, 0, 0, 0) rgba(245, 0, 0, 0); 
 
    border-width: 15px; 
 
    margin-left: -1px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<span class="pam"> 
 
    <span class="glyphicon glyphicon-question-sign go-left tbn"></span> 
 
    Why do we use it? 
 
    <div class="tooltips"><!--do not use tooltip class because is used on bootstrap --> 
 
\t <p class="tooltiptext"> 
 
\t \t <b>What is Lorem Ipsum?</b><br> 
 
     Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
\t </p> 
 
</div> 
 
    </span>

Answer 1

試試這個

body{padding: 70px;} 
 
.pam{ 
 
    position: relative; 
 
    padding: 10px 70px; 
 
    z-index:1; 
 
    display:inline-block; 
 
    vertical-align:middle; 
 
} 
 
.tooltips { 
 
    display: none; 
 
    position: absolute; 
 
    z-index: 7; 
 
    left: 0px; 
 
    bottom: 100%; 
 
    width: 400px; 
 
} 
 
.tbn{ 
 
    margin-left:-30px; 
 
    margin-right: 30px; 
 
    font-size: 24px; 
 
    vertical-align: middle; 
 
} 
 
.tbn:hover + .tooltips{ 
 
    display: block; 
 
} 
 
.tooltiptext { 
 
    font-size: 14px; 
 
    font-family: Arial, Helvetica, sans-serif; 
 
    line-height: 1.2; 
 
    text-align: justify; 
 
    color: #525759; 
 
    border-radius: 2px; 
 
    padding: 10px; 
 
    position: relative; 
 
    background: #fff; 
 
    z-index: 1; 
 
    top: 100%; 
 
    display: block; 
 
    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.22); 
 
    border-bottom: 1px solid #1a9edd; 
 
} 
 
.tooltiptext:after, 
 
.tooltiptext:before { 
 
    position: absolute; 
 
    top: 100%; 
 
    left: 10%; 
 
    border: solid transparent; 
 
    content: " "; 
 
} 
 
.tooltiptext:after { 
 
    border-top-color: #fff; 
 
    border-width: 14px; 
 
} 
 
.tooltiptext:before { 
 
    border-color: #1a9edd rgba(245, 0, 0, 0) rgba(245, 0, 0, 0); 
 
    border-width: 15px; 
 
    margin-left: -1px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<span class="pam"> 
 
    <span class="glyphicon glyphicon-question-sign go-left tbn"></span> 
 
    Why do we use it? 
 
    <div class="tooltips"><!--do not use tooltip class because is used on bootstrap --> 
 
    <p class="tooltiptext"> 
 
     <b>What is Lorem Ipsum?</b><br> 
 
    Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. 
 
    </p> 
 
    </div> 
 
</span>