Bootstrap 3.4以上版本在弹出窗口或工具提示内容中显示之前会对HTML标记和属性进行清理。因此，如果标签和属性不在默认白名单中，请确保将其添加到白名单中。
默认的白名单已经列在这里：https://getbootstrap.com/docs/3.4/javascript/#js-sanitizer
白色名单中的新标签可以在下面添加
//为了允许标签显示在弹出体中，我们需要将默认白名单中不存在的标签加入白名单。//默认情况下，当前表及其子表不在白名单中//所以我添加了表标记沿着其他必需的标记

var myDefaultWhiteList = $.fn.popover.Constructor.DEFAULTS.whiteList
myDefaultWhiteList.table = []
myDefaultWhiteList.tbody = []
myDefaultWhiteList.tr = []
myDefaultWhiteList.td = []
myDefaultWhiteList.th = []

//要允许标签属性，我们可以像这样添加myDefaultWhiteList.td =['data-option']
您还可以添加标记以在弹出框主体中显示HTML内容

工具提示和弹出框使用内置的消毒程序来消毒接受HTML的选项
https://getbootstrap.com/docs/4.3/getting-started/javascript/#sanitizer
试试这个：

$(function() {
    $.fn.popover.Constructor.Default.whiteList.table = [];
    $.fn.popover.Constructor.Default.whiteList.tr = [];
    $.fn.popover.Constructor.Default.whiteList.td = [];
    $.fn.popover.Constructor.Default.whiteList.th = [];
    $.fn.popover.Constructor.Default.whiteList.div = [];
    $.fn.popover.Constructor.Default.whiteList.tbody = [];
    $.fn.popover.Constructor.Default.whiteList.thead = [];

  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});

biri的回答没有错，但你要知道（因为它也有很糟糕的记录），如果你想的话，你可以停用整个消毒剂。

$(function() {
  $("[data-toggle=popover]").popover({
    sanitize: false,
  });
});

• 更新：* 你知道什么？它现在已经被记录下来了：

+----------+---------+---------+----------------------------------------+
| Name     | Type    | Default | Description                            |
+----------+---------+---------+----------------------------------------+
| sanitize | boolean | true    | Enable or disable the sanitization. If |
|          |         |         | activated 'template', 'content' and    |
|          |         |         | 'title' options will be sanitized.     |
+----------+---------+---------+----------------------------------------+

对于一些如何表不工作在弹出框，但你可以使用其他标签，如ul。我刚刚更新了ul，希望它能帮助你。谢谢

$("[data-toggle=popover]").popover({
    html: true,    
    content: function() { return $('#a02').html(); },  // Also tried directly without function
    title: 'Test',
  }).click(function() {
	  $(this).popover('show');
  });

.popover-html ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-html ul li {  
    display: inline-block;
    white-space: nowrap;
    width: 33%;
}

.popover-html ul li + li {
  padding-left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a href="#" data-toggle="popover" data-trigger="focus" data-placement="right">
   Click Here for Popover
</a>

<div id="a02" style="display: none;">
   Some text before table <div class='popover-html'><ul><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul></div>

另一种方式是在data-content属性中添加HTML。谢谢

$("[data-toggle=popover]").popover();

.popover-html ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.popover-html ul li {  
    display: inline-block;
    white-space: nowrap;
    width: 33%;
}

.popover-html ul li + li {
  padding-left: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>


<a tabindex="0"
   class="btn btn-lg btn-primary" 
   role="button" 
   data-html="true" 
   data-toggle="popover" 
   data-trigger="focus" 
   title="Test" 
   data-content="Some text before table<div class='popover-html'><ul><li>Column 1</li><li>Column 2</li><li>Column 3</li></ul><ul><li>1</li><li>2</li><li>3</li></ul></div>">Click Here for Popover</a>

你可以这样做：

$(function() {
  $("[data-toggle=popover]").popover({
    html: true,
    content: function() {
      var content = $(this).attr("data-popover-content");
      return $(content).children(".popover-body").html();
    },
    title: function() {
      var title = $(this).attr("data-popover-content");
      return $(title).children(".popover-heading").html();
    }
  });
});

<!-- Popover #1 -->
<a href="#" class="btn btn-primary" tabindex="0" data-toggle="popover" data-trigger="focus" data-popover-content="#a1" data-placement="right">Popover Example</a>

<!-- Content for Popover #1 -->
<div id="a1" class="hidden">
  <div class="popover-heading">Title</div>
  <div class="popover-body">
    <table style="width:100%">
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
      <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
      </tr>
    </table>
  </div>
</div>

链接到Popover Bootstrap 4.0文档更新：Updated JSFiddle

<div class=".." data-bs-toggle="popover"  data-bs-trigger="hover"  data-bs-html="true" data-bs-animation="false" data-bs-placement="top" data-bs-content=".." title=".."></div>

添加data-bs-animation=“false”解决了我的问题。