背景

众所周知，bootstrap 的 popover 需要把内容放到 data-content 属性里，用引号包裹，在里面加入 html 元素时会出现引号冲突问题。

解决方案

但还好 html 支持单双引号，故可以在 data-content 属性里使用单引号 '，在内部 html 代码里使用双引号 "。

以下是一个样例。

<button type="button" class="btn btn-outline-info" data-toggle="popover" data-placement="bottom" data-html="true" data-content='
    <div class="container">
        <a href="**.txt" class="btn btn-outline-info btn-sm btn-block">
            <span class="oi oi-cloud-download" title="cloud-download" aria-hidden="true"></span>
            下载
        </a>
        <p style="margin:0;">或者通过联系方式交换你的公钥</p>
        <p style="margin:0;"><code>指纹: xxxxx</code></p>
    </div>
'>
    <span class="oi oi-key" title="key" aria-hidden="true"></span> GPG Key
</button>

展示