Skip to content

Popover 气泡卡片

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

代码演示

popover
this is content
xml
<r-popover>
    <r-button>popover</r-button>
    <r-content>
      <div>this is content</div>
    </r-content>
</r-popover>

属性

trigger

触发方式

  • hover
hover
hover
xml
<r-popover trigger="hover">
    <r-button>hover</r-button>
    <r-content>
      <div>hover</div>
    </r-content>
  </r-popover>
  • click
click
click
xml
<r-popover trigger="click">
    <r-button>click</r-button>
    <r-content>
      <div>click</div>
    </r-content>
  </r-popover>

placement

展示的位置

  • bottom
bottom
bottom
xml
<r-popover trigger="hover" placement="bottom">
    <r-button>bottom</r-button>
    <r-content>
      <div>bottom</div>
    </r-content>
  </r-popover>
  • top
top
top
xml
<r-popover trigger="hover" placement="top">
    <r-button>top</r-button>
    <r-content>
      <div>top</div>
    </r-content>
  </r-popover>

Released under the MIT License.