css - angular bootstrap popover 显示绑定(bind)对象的悬停数据

Question

我有如下带有 Angular Directive(指令)的 html，它是一个超链接以及使用来自患者对象的数据的 bo-bind 在 div 上显示文本。

<a class='bold cursor-pointer hyperlink patient-name first-level-child' bo-href='patient.link'>
        <div class = "patient-name handle-long-text" bo-bind = 'patient.personName'></div>
</a>

我需要制作我的超链接以根据患者对象(例如姓名:xyz)在悬停上显示一些患者详细信息 电话 : 3535353 地址 : xxxxx)

我打算使用 UI.bootstrap popover 但是我发现 popover 标签只会显示文本而且我无法在 popover 标签上放置一些 html，有没有什么办法或者是否有更好的方法来获得悬停与我的动态绑定(bind)对象患者一起工作？

Answer 1

没问题，事实上您可以在 Bootstrap 弹出窗口中包含 HTML。看看this demo bootply ，使用这个标记:

  <button type="button" 
        class="btn btn-lg btn-danger" 
        data-toggle="popover" 
        data-trigger="hover"
        title="Popover title"
        data-html="true"
        data-content="Name : xyz<br/>Phone : 3535353 <br/>Address : xxxxx">
      Click to toggle popover
  </button>

重要的部分是:

data-trigger="hover"将其设置为在悬停时显示

data-html="true"将其设置为在 data-content 中获取 HTML属性，而不是文本，这样

data-content="Name : xyz<br/>..."可以用HTML代码代替纯文本填充