ant-design/components/popover/demo/basic.html

<div class="code-box">
  <div class="code-box-demo">
    <div id="components-popover-demo-basic"></div>
    <script>(function(){"use strict";

var Popover = antd.Popover;
var content = React.createElement(
  "div",
  null,
  React.createElement(
    "p",
    null,
    "内容"
  ),
  React.createElement(
    "p",
    null,
    "内容"
  )
);

React.render(React.createElement(
  Popover,
  { overlay: content, title: "标题" },
  React.createElement(
    "button",
    { className: "ant-btn ant-btn-primary" },
    "弹出卡片"
  )
), document.getElementById('components-popover-demo-basic'));})()</script><div class="highlight"><pre><code class="javascript"><span class="keyword">var</span> Popover = antd.Popover;
<span class="keyword">var</span> content = <span class="xml"><span class="tag">&lt;<span class="title">div</span>&gt;</span>
  <span class="tag">&lt;<span class="title">p</span>&gt;</span>内容<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
  <span class="tag">&lt;<span class="title">p</span>&gt;</span>内容<span class="tag">&lt;/<span class="title">p</span>&gt;</span>
<span class="tag">&lt;/<span class="title">div</span>&gt;</span>;</span>

React.render(
  <span class="xml"><span class="tag">&lt;<span class="title">Popover</span> <span class="attribute">overlay</span>=<span class="value">{content}</span> <span class="attribute">title</span>=<span class="value">"标题"</span>&gt;</span>
    <span class="tag">&lt;<span class="title">button</span> <span class="attribute">className</span>=<span class="value">"ant-btn ant-btn-primary"</span>&gt;</span>弹出卡片<span class="tag">&lt;/<span class="title">button</span>&gt;</span>
  <span class="tag">&lt;/<span class="title">Popover</span>&gt;</span>
, document.getElementById('components-popover-demo-basic'));</span></code></pre></div>
  </div>
  <div class="code-box-meta markdown">
    <div class="code-box-title">基本</div>
    <p>最简单的用法。</p>
    <span class="collapse anticon anticon-circle-o-right"></span>
  </div>
</div>