Callout 标注气泡

点击/鼠标移入元素,弹出气泡式浮层。

我发现这个可以被维护为一个UI小组件,好用!此处重点提到inherit,对于伪元素来讲,会取生成该伪元素的宿主元素。我们不需要在DOM层面写三角箭头标签,直接用after来实现,如果有改动也很容易 我们只需要修改父级的样式,方便快捷 666^-^

例子如下:

Callout 标注气泡_第1张图片

```

.c{

  position:relative;

  padding:10px;

  width:200px;

  border-radius:4px;

  background-color:#d9f5ff;

  line-height:1.5;

  border:1px solid #d5e8ff;

  &:after{

    content:"";

    position:absolute;

    top:-.4em;

    left:1em;

    padding:.35em;

    color:inherit;

    border:inherit;

    background-color:inherit;

    border-right:0;

    border-bottom:0;

    transform:rotate(45deg);

  }

}

```

你可能感兴趣的:(Callout 标注气泡)