负边际导致悬停中断

Question

为何在悬停图标时发生这种情况？看起来并不是始终将鼠标悬停在元素上:|

我认为问题在于负边际，但很奇怪，因为边际不应影响悬停。

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>