1.純?nèi)切蔚膶懛ǎ?/p>
html:
<div class="tooltip-popper is-dark">消息提醒
? ? ? ? <div class="popper-arrow"></div>
</div>
樣式：
.tooltip-popper{
? ? ? ? position: absolute;
? ? ? ? border-radius: 4px;
? ? ? ? padding: 10px;
? ? ? ? font-size: 12px;
? ? ? ? text-align: center;
? ? ? ? white-space: nowrap;
? ? ? ? line-height: 1.2;
? ? ? ? min-width: 10px;
? ? ? ? word-wrap: break-word;
? ? ? ? transform-origin: left center;
? ? ? ? z-index: 2007;
? ? ? ? visibility: hidden;
? ? ? ? opacity: 0;
? ? ? ? top: 55px;
? ? ? ? left: 50%;
? ? ? ? transform: translateX(-50%);
? ? ? ? transition: all .3s;
? ? ? ? -webkit-transition: all .3s;
? ? }
? ? .tooltip-popper.is-dark{
? ? ? ? background-color: #595959;
? ? ? ? box-shadow: 0 12px 32px 0 rgba(38, 38, 38, 0.16);
? ? ? ? transition: opacity 0.3s;
? ? ? ? color: #FFF;
? ? }
? ? .tooltip-popper .popper-arrow,
? ? .tooltip-popper .popper-arrow::after {
? ? ? ? position: absolute;
? ? ? ? display: block;
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? border-color: transparent;
? ? ? ? border-style: solid;
? ? }
? ? .tooltip-popper .popper-arrow {
? ? ? ? top: -9px;
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? left: 50%;
? ? ? ? margin-left: -5px;
? ? ? ? border-left: 6px solid transparent;
? ? ? ? border-right: 6px solid transparent;
? ? ? ? border-bottom: 6px solid #595959;
? ? }
2.正方形的寫法：
html:
? ? ? ? <div class="popper-arrow"></div>
</div>
樣式：
.tooltip-popper{
? ? ? ? position: absolute;
? ? ? ? border-radius: 4px;
? ? ? ? padding: 10px;
? ? ? ? font-size: 12px;
? ? ? ? text-align: center;
? ? ? ? white-space: nowrap;
? ? ? ? line-height: 1.2;
? ? ? ? min-width: 10px;
? ? ? ? word-wrap: break-word;
? ? ? ? transform-origin: left center;
? ? ? ? z-index: 2007;
? ? ? ? visibility: hidden;
? ? ? ? opacity: 0;
? ? ? ? top: 55px;
? ? ? ? left: 50%;
? ? ? ? transform: translateX(-50%);
? ? ? ? transition: all .3s;
? ? ? ? -webkit-transition: all .3s;
? ? }
? ? .tooltip-popper.is-dark{
? ? ? ? background: #303133;
? ? ? ? transition: opacity 0.3s;
? ? ? ? color: #FFF;
? ? }
? ? .tooltip-popper .popper-arrow,
? ? .tooltip-popper .popper-arrow::after {
? ? ? ? position: absolute;
? ? ? ? display: block;
? ? ? ? width: 0;
? ? ? ? height: 0;
? ? ? ? border-color: transparent;
? ? ? ? border-style: solid;
? ? }
? ? .tooltip-popper .popper-arrow {
? ? ? ? border-width: 5px;
? ? ? ? top: -3px;
? ? ? ? width: 5px;
? ? ? ? height: 0;
? ? ? ? background: #303133;
? ? ? ? left: 50%;
? ? ? ? margin-left: -5px;
? ? ? ? transform: rotate(45deg);
? ? }
