如何使用CSS在鼠标悬停时创建信息框？

Question

如何使用CSS在鼠标悬停时创建信息框？

这是我写的代码，它在所有浏览器中都可以正常工作，除了ie 11和bellow，其中信息框仅部分显示在按钮表面内

＆＃13;

＆＃13;

button.info {
  position: relative;
  top: 10em;
}
button.info span {
  display: none;
}
button.info:hover span {
  display: block;
  position: absolute;
  bottom: 1.5em;
  z-index: 6;
  width: 10em;
  border: 0.2em solid #535757;
  text-align: center;
  font-size: 1.2em;
}
button.info:hover span:after {
  content: '';
  position: absolute;
  bottom: -0.5em;
  width: 0.5em;
  height: 0.5em;
  border-bottom: 0.2em solid #535757;
  border-right: 0.2em solid #535757;
  left: 4%;
  margin-left: -0.2em;
  -moz-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  z-index: 6;
}

＆＃13;

<button type="button" class="info">mouse over<span><p>More information</p></span>
</button>

＆＃13;

＆＃13;

＆＃13;

问题描述的更新： IE上的故障模式发生在按钮标签上。如果为div标签替换了按钮标签，则可以正常工作。