css提示tooltip效果

Hover over the "i"!
源码
<div class="container">
  <div class="label">
	<span class="tooltip-toggle" aria-label="Sample text for your tooltip!" tabindex="0">
	  <svg viewBox="0 0 27 27" xmlns="http://www.w3.org/2000/svg"><g fill="#ED3E44" fill-rule="evenodd"><path d="M13.5 27C20.956 27 27 20.956 27 13.5S20.956 0 13.5 0 0 6.044 0 13.5 6.044 27 13.5 27zm0-2C7.15 25 2 19.85 2 13.5S7.15 2 13.5 2 25 7.15 25 13.5 19.85 25 13.5 25z"/><path d="M12.05 7.64c0-.228.04-.423.12-.585.077-.163.185-.295.32-.397.138-.102.298-.177.48-.227.184-.048.383-.073.598-.073.203 0 .398.025.584.074.186.05.35.126.488.228.14.102.252.234.336.397.084.162.127.357.127.584 0 .22-.043.412-.127.574-.084.163-.196.297-.336.4-.14.106-.302.185-.488.237-.186.053-.38.08-.584.08-.215 0-.414-.027-.597-.08-.182-.05-.342-.13-.48-.235-.135-.104-.243-.238-.32-.4-.08-.163-.12-.355-.12-.576zm-1.02 11.517c.134 0 .275-.013.424-.04.148-.025.284-.08.41-.16.124-.082.23-.198.313-.35.085-.15.127-.354.127-.61v-5.423c0-.238-.042-.43-.127-.57-.084-.144-.19-.254-.318-.332-.13-.08-.267-.13-.415-.153-.148-.024-.286-.036-.414-.036h-.21v-.95h4.195v7.463c0 .256.043.46.127.61.084.152.19.268.314.35.125.08.263.135.414.16.15.027.29.04.418.04h.21v.95H10.82v-.95h.21z"/></g></svg>
	</span>
	<span class="label-text">Hover over the "i"!</span>
  </div>
</div>

<style>
html,body {
  background-color: #363642;
  color: #2D2D36;
  padding: 4rem;
}
.container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 2px 0 rgba(153, 153, 153, 0.35);
  padding: 1em;
  border: 1px solid #eee;
  display: block;
  width: 200px;
  margin: 0 auto;
}

.label {
  display: flex;
  align-items: center;
  justify-content: center;
}

.label-text {
  margin-left: 0.5em;
}

.tooltip-toggle {
  cursor: pointer;
  position: relative;
}
.tooltip-toggle svg {
  height: 18px;
  width: 18px;
}
.tooltip-toggle::before {
  position: absolute;
  top: -80px;
  left: -80px;
  background-color: #2B222A;
  border-radius: 5px;
  color: #fff;
  content: attr(aria-label);
  padding: 1rem;
  text-transform: none;
  transition: all 0.5s ease;
  width: 160px;
}
.tooltip-toggle::after {
  position: absolute;
  top: -12px;
  left: 9px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #2B222A;
  content: " ";
  font-size: 0;
  line-height: 0;
  margin-left: -5px;
  width: 0;
}
.tooltip-toggle::before, .tooltip-toggle::after {
  color: #efefef;
  font-family: monospace;
  font-size: 16px;
  opacity: 0;
  pointer-events: none;
  text-align: center;
}
.tooltip-toggle:focus::before, .tooltip-toggle:focus::after, .tooltip-toggle:hover::before, .tooltip-toggle:hover::after {
  opacity: 1;
  transition: all 0.75s ease;
}
</style>
链接: https://fly63.com/course/33_1592