气泡

* tooltip样式 */[tooltip] {  position: relative;}[tooltip]::after {  display: none;  content: attr(tooltip);  position: absolute;  white-space: nowrap;  overflow: hidden;  text-overflow: ellipsis;  padding: 5px 12px;  max-width: 200px;  border-radius: 4px;  box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.4);  z-index: 1;}[tooltip]::before {  display: none;  content: "";  position: absolute;  border: 5px solid transparent;  border-bottom-width: 0;  z-index: 1;}[tooltip]:hover::after {  display: block;}[tooltip]:hover::before {  display: block;}[tooltip][placement^="right"]::after,[tooltip][placement^="right"]::before {  animation: anime-right 300ms ease-out forwards;}/* 气泡主题 */.tooltip-theme-dark,[tooltip]::after {  color: #fff;  background-color: #313131;}/* 气泡位置 *//*----右----*/.tooltip-placement-right,[tooltip][placement="right"]::after {  left: calc(100% + 10px);  top: 50%;  transform: translate(0, -50%);}/* 三角形主题 */.triangle-theme-dark,[tooltip]::before {  border-top-color: #313131;}/*----右----*/.triangle-placement-right,[tooltip][placement="right"]::before,.triangle-placement-right-top,[tooltip][placement="right-top"]::before,.triangle-placement-right-bottom,[tooltip][placement="right-bottom"]::before {  left: calc(100% + 3px);  top: 50%;  transform: translate(0, -50%) rotateZ(90deg);}@keyframes anime-right {  from {    opacity: 0.5;    left: 150%;  }}