angular bootstrap popover用于显示绑定对象的悬停数据

时间:2015-04-10 17:58:48

标签: css angularjs twitter-bootstrap

我的html如下所示,角度指令是超链接以及div上的显示文本,使用bo-bind和来自患者对象的数据。

<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,有什么办法或者是否有更好的方法来获取悬停与我的动态绑定对象患者一起工作?。

1 个答案:

答案 0 :(得分:2)

当然,事实上你 可以 在引导程序弹出窗口中包含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代码而不是纯文本