xiaoshi-wx/myComponents/popover2/popover.wxss

/* myComponents/popover2/popover.wxss */

.myPopover{
  position: relative;
  /* width: auto;
  height: auto; */
}
.popoverView{
 width: auto;
 height: auto;
 max-height: 100px;
 padding: 10px;
 position: absolute;
  background-color: white;
  box-shadow: 0 0 2px 2px #ddd;
  border-radius: 6rpx;
  z-index: 999999;
}
.popoverView.top{
  bottom: 30px;
  right: calc(100% - 20px);
}
.popoverView.bottom{
  top: 35px;
  right: calc(100% - 20px);
  
}
.popoverView::before{
  position: absolute;
    display: inline-block;
    width: 0;
    height: 0px;
    content: '';
    border-style: solid;
    border-width: 6px;
    border-color: #fff #fff transparent transparent;
    box-shadow: 2px -2px 2px #ddd;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    border-top-width: 6px;
    border-right-width: 6px;
    border-bottom-width: 6px;
    border-left-width: 6px;
    border-top-color: rgb(255, 255, 255);
    border-right-color: rgb(255, 255, 255);
    border-bottom-color: transparent;
    border-left-color: transparent;
}
.popoverView.top::before {
  bottom: -6px;
  right: 10px;
  transform: rotate(135deg);
}
.popoverView.left::before {
  right: 20px;
}
.popoverView.bottom::before {
  top: -6px;
  right: 10px;
  transform: rotate(-45deg);
}