twitter-bootstrap – 是否可以使用div作为Twitter的Popover的内容

我使用twitter的bootstrap的popover here.现在，当我滚动popover文本时，popover只显示从< a>的data-content属性的文本。我想知道如果有反正把一个< div>里面的popover。潜在的，我想使用PHP和MysqL在那里，但如果我可以得到一个div工作，我想我可以找出其余的。我试着将数据内容设置为一个div ID，但它没有工作。

HTML：

<a class='danger' 
   data-placement='above' 
   rel='popover' 
   data-content='#PopupDiv' 
   href='#'>Click</a>

解决方法

首先，如果你想在内部使用HTML，你需要将HTML选项设置为true：

$('.danger').popover({ html : true});

然后，您有两个选项来设置Popover的内容

>使用data-content属性。这是默认选项。
>使用返回HTML内容的自定义JS函数。

使用数据内容：
您需要转义HTML内容，如下所示：

<a class='danger' data-placement='above' 
   data-content="&lt;div&gt;This is your div content&lt;/div&gt;" 
   title="Title" href='#'>Click</a>

您可以手动转义HTML或使用函数。我不知道PHP，但在Rails我们使用* html_safe *。

使用JS函数：
如果你这样做，你有几个选择。最简单的我认为是把你的div内容隐藏在任何你想要的，然后写一个函数传递其内容popover。这样的东西：

$(document).ready(function(){
  $('.danger').popover({ 
    html : true,content: function() {
      return $('#popover_content_wrapper').html();
    }
  });
});

然后你的HTML看起来像这样：

<a class='danger' data-placement='above' title="Popover Title" href='#'>Click</a>
<div id="popover_content_wrapper" style="display: none">
  <div>This is your div content</div>
</div>

希望它帮助！

PS：我使用popover时遇到了一些麻烦，没有设置标题属性…所以，记住总是设置标题。

原文链接：https://www.f2er.com/bootstrap/235156.html

twitter-bootstrap – 是否可以使用div作为Twitter的Popover的内容

解决方法

猜你在找的Bootstrap相关文章