Question

我有一个带有以下HTML和coffeescript的Rails应用程序：

<span id="CEO_portrait"><%= image_tag "CEO_portrait.png", class: "portrait" %></span>
<div id="tooltip_container">
  <div id="CEO_biography">
    "The CEO founded the company in 1969."
  </div>
</div>

$ ->
  $('#CEO_portrait').popover
    title: "James E. Lee"
    placement: "top"
    trigger: "hover"
    html: true
    container: "#tooltip_container"
    content: ->
      $('#CEO_biography')

当我的鼠标第一次悬停在'#CEO_portrait'范围内时，弹出窗口会显示相应的内容。但是，当我的鼠标离开跨度时，ID为“CEO_biography”的div将被删除。因此，当我悬停时我的鼠标再次出现在'#CEO_portrait'上，标题显示但不是内容。我无法弄清楚为什么会发生这种情况。如何让内容继续存在？

Answer 1

http://bootply.com/88701

<span id="CEO_portrait">test</span>
  <div id="tooltip_container">
  <div id="CEO_biography">
     "The CEO founded the company in 1969."
  </div>
 </div>

它在bootstrap 3和bootstrap 2.3.2

中适用于我

是的，内容消失了，但下次我将鼠标悬停在内容上仍然是popover。看看这个例子......

确保已加载所有引导脚本/ css等。

Answer 2

将内容保存在活动之外：

$ ->
 myContent = $('#CEO_biography') // save the content for future use

 $('#CEO_portrait').popover
 title: "James E. Lee"
 placement: "top"
 trigger: "hover"
 html: true
 // container: "#tooltip_container" // I don't know why you use this
 content: ->
   myContent

以下是我使用数据属性的工作解决方案：

$("[data-toggle='popover-div']").each ->
 that = $(this)
 content = $(that.data("content-div")) // Save content of the id given in "data-content-div"

 that.popover
   html: true
   content: ->
     content

玉

a.btn.btn-share(data-toggle="popover-div", data-content-div="#share-popover",
data-trigger="click", data-placement="top")
  | Share <i class="fa fa-share"></i>

.share-popover-wrapper // Display: none
  #share-popover
   // [... Content goes here ...]

Bootstrap popover会破坏内容

2 个答案: