如何编写用于Bootstrap popover和工具提示内容的html

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (260)

这可能是重复的; 很难分辨,因为关键词包含“html”和“内容”,甚至Bing和Google都返回了很多误报。

当data-html = true时,引导工具提示和弹出窗口支持数据内容属性的html值。但是,这是无效的

<input id="email" class="form-control" type="email" 
  data-bind="value: Email, valueUpdate: 'afterkeydown'" 
  data-container="body" data-toggle="popover" data-placement="bottom"
  data-title="Email" data-html="true"
  data-content="<p>This is <i>your</i> email address.</p>" />

因为你不能只将html放在属于HTML的属性的值中。它可能会混淆解析器,HTML规范不允许这样做。

虽然它似乎与Internet Explorer一起使用,但我真的不想用50种不同的浏览器和版本进行测试。它肯定混淆Visual Studio 2013 HTML编辑器中的解析器。该编辑认为没有收尾报价。

我可以通过在单独的文件中分配JavaScript中的属性来避免这种情况,但这很笨拙并且会使关注点分离。

那么,正确的方法是什么?

提问于
用户回答回答于

您可以将任何想要的内容添加到HTML属性中,只要它是有效的html属性值即可。什么是有效的属性值?什么不包含标签,报价等。所以....什么?解决方案是:在将字符串附加到html属性中之前对字符串进行Scape。

如果您使用的是PHP:http//fi2.php.net/htmlspecialchars 或Twig:http//twig.sensiolabs.org/doc/filters/escape.html

如果你正在使用jquery,当你执行$ el.data('my_scaped_json)将转换为它原来的任何东西,例如json对象或html-string:$($ el.data('my_scaped_html));

用户回答回答于

正如接受的答案所指出的那样,你不能在引用"的字符串中有引号"。此问题经常发生:如果要显示看起来像HTML的文本。浏览器应该如何知道它应该解析为HTML以及它应该简单显示的内容。

例如,如何让浏览器显示文本 <p></p>

答案是逃避。而不是像"和的字符<,你使用像&quot;和的占位符&lt;

但是,逃避引号的解决方案在这里不起作用。正是因为浏览器不会将其解析为HTML。如果你在你的html中放入转义引号,它们看起来不像浏览器的引号,它们看起来像文本。

但是有一个不同的解决方案:引号的字符串"可以包含'没有问题。以下内容有效:

data-content="<div id='string_in_string' ></div>"

这可以应用于你的bootstrap popovers,我设置了一个fiddle,它显示了如何正确解析单引号字符串,而转义的字符串混淆了浏览器:https//jsfiddle.net/z4t2sud3/3/

<mark data-content="
    <button class=&quot;btnr&quot; type=&quot;button&quot;>
        Doesn't work
    </button>

    <button class='btn btn-info' type='button'>
        Works
    </button>
    " data-html="true" data-toggle="popover">
    Popovered
</mark>

并确保通过Javascript激活popover:

$(function () {
  $('[data-toggle="popover"]').popover()
})

扫码关注云+社区

领取腾讯云代金券