0

我有一个带有以下 HTML 和咖啡脚本的 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' 再次出现，标题显示但内容不显示。我无法弄清楚为什么会发生这种情况。如何让内容持续存在？

4

2 回答 2

0

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 中对我有用

是的，内容消失了，但下次我将鼠标悬停时，内容仍然在弹出窗口上。看例子..

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

于 2013-10-19T14:15:57.483 回答
0

将内容保存在事件之外：

$ ->
 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 ...]
于 2013-12-12T11:40:20.697 回答