是否可以将div用作Twitter的Popover的内容 [英] Is it possible to use a div as content for Twitter's Popover

问题描述

我正在此处使用twitter的引导程序的弹出窗口.现在，当我在弹出文本上滚动时，会弹出一个弹出窗口，其中仅包含<a>的data-content属性中的文本.我想知道是否在弹出框内放置了<div>.潜在地，我想在那里使用php和mysql，但是如果我可以使div正常工作，我想我可以弄清楚其余部分.我尝试将数据内容设置为div ID，但这没有用.

I am using twitter's bootstrap's popover here. Right now, when i scroll over the popover text a popover appears with just text from the <a>'s data-content attribute. I was wondering if there was anyway to put a <div> inside the popover. Potentially, I would like to use php and mysql in there, but if i could get a div to work i think i can figure out the rest. I tried setting data-content to a div ID, but it didnt work.

HTML:

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

推荐答案

首先，如果要在内容中使用HTML，则需要将HTML选项设置为true:

First of all, if you want to use HTML inside the content you need to set the HTML option to true:

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

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

Then you have two options to set the content for a Popover

• 使用数据内容属性.这是默认选项.
• 使用自定义JS函数返回HTML内容.

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

Using data-content: You need to escape the HTML content, something like this:

<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 *.

You can either escape the HTML manually or use a function. I don't know about PHP but in Rails we use *html_safe*.

使用JS函数: 如果执行此操作，则有几种选择.我认为最简单的方法是将div内容隐藏在所需的位置，然后编写一个函数以将其内容传递给popover.像这样:

Using a JS function: If you do this, you have several options. The easiest I think is to put your div content hidden wherever you want and then write a function to pass its content to popover. Something like this:

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

然后您的HTML如下所示:

And then your HTML looks like this:

<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:使用弹出框而不设置title属性时遇到了一些麻烦...因此，请记住始终设置标题.

PS: I've had some troubles when using popover and not setting the title attribute... so, remember to always set the title.

这篇关于是否可以将div用作Twitter的Popover的内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！