entityMap|0|type|LINK|mutability|MUTABLE|data|url|http://www.bootply.com/ICbHgauH3Y|blocks|key|dc4vh|text|您缺少弹出窗口的内容，您需要这样的内容|unstyled|depth|inlineStyleRanges|entityRanges|700qn|$(document).ready(function+()+{
++++var+popoverTemplate+=+['',
++++++++'',
++++++++'',
++++++++'',
++++++++''].join('');

++++var+content+=+['asfaf+asfsadf',
++++++++'asdf+asdfasf',
++++++++'+asfa+',+].join('');


++++$('body').popover({
++++++++selector:+'[rel=popover]',
++++++++trigger:+'click',
++++++++content:+content,
++++++++template:+popoverTemplate,
++++++++placement:+"bottom",
++++++++html:+true
++++});
});|code-block|syntax|javascript|3q2ju|Working+demo|offset|length|style|UNDERLINE^0|0|0|0|C|0|C|0^^$0|$1|$2|3|4|5|6|$7|8]]]|9|@$A|B|C|D|2|E|F|T|G|@]|H|@]|6|$]]|$A|I|C|J|2|K|F|U|G|@]|H|@]|6|$L|M]]|$A|N|C|O|2|E|F|V|G|@$P|W|Q|X|R|S]]|H|@$P|Y|Q|Z|A|10]]|6|$]]]]

you are missing the content of the popover, you'll need something like this

<pre><code>$(document).ready(function () {
 var popoverTemplate = ['&lt;div class="timePickerWrapper popover"&gt;',
 '&lt;div class="arrow"&gt;&lt;/div&gt;',
 '&lt;div class="popover-content"&gt;',
 '&lt;/div&gt;',
 '&lt;/div&gt;'].join('');

 var content = ['&lt;div class="timePickerCanvas"&gt;asfaf asfsadf&lt;/div&gt;',
 '&lt;div class="timePickerClock timePickerHours"&gt;asdf asdfasf&lt;/div&gt;',
 '&lt;div class="timePickerClock timePickerMinutes"&gt; asfa &lt;/div&gt;', ].join('');


 $('body').popover({
 selector: '[rel=popover]',
 trigger: 'click',
 content: content,
 template: popoverTemplate,
 placement: "bottom",
 html: true
 });
});
</code></pre>

<a href="http://www.bootply.com/ICbHgauH3Y">Working demo</a>

entityMap|blocks|key|9cci9|text|@code-jaff这是一个很好的答案，但我注意到工作演示的弹出窗口看起来不像是从按钮出来的。如果这种情况发生在其他人身上，请尝试将container：'body‘添加到弹出选项中。如下所示：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|9mlo4|$('body').popover({
++++selector:+'[rel=popover]',
++++trigger:+'click',
++++content:+content,
++++template:+popoverTemplate,
++++placement:+"bottom",
++++html:+true,
++++container:+'body'
});|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

@code-jaff that is a great answer, but i noticed that the Working Demo's popover doesn't look like it's coming out of the button. If this is happening to anyone else, try adding container: 'body' to the popover options. Like this:

<pre><code>$('body').popover({
 selector: '[rel=popover]',
 trigger: 'click',
 content: content,
 template: popoverTemplate,
 placement: "bottom",
 html: true,
 container: 'body'
});
</code></pre>

entityMap|blocks|key|aujkt|text|我更喜欢在模板中有所有的HTML。它是这样的：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6omjb|Javascript中的一些东西|c8oln|$(".btn").popover({
+++template:+$("#selector").html(),
+++placement:+"auto"
});|code-block|syntax|javascript|eb0is|和HTML格式|2eo4f|Anything+you+want+in+your+popovers,+either+dynamic+or+static^0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|P|9|@]|A|@]|B|$H|I]]|$2|J|4|K|6|7|8|Q|9|@]|A|@]|B|$]]|$2|L|4|M|6|G|8|R|9|@]|A|@]|B|$H|I]]]]

I would prefer to have all the HTML in templates. It goes like this:

Something in Javascript

<pre><code>$(".btn").popover({
 template: $("#selector").html(),
 placement: "auto"
});
</code></pre>

And in HTML

<pre><code>&lt;div id="selector"&gt;
 Anything you want in your popovers, either dynamic or static
&lt;div&gt;
</code></pre>

entityMap|blocks|key|faq5j|text|我想尝试的是最小的配置，并且不想将代码拆分成JS和HTML，下面是我的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|eeqbb|这是我发现的|a6po9|Bootstrap版本4.5.2添加了popper+js|6f32t|将代码放在data-content属性中。|ccjt1|这是我的HTML代码|9ag92|Dismissible+popover|code-block|syntax|javascript|bj0mb|以下是我的JS代码|4vcid|$('[data-toggle="popover"]').popover({
++++html+:+true
+});^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|W|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|X|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|Y|9|@]|A|@]|B|$N|O]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|M|8|10|9|@]|A|@]|B|$N|O]]]]

What I want to try is a minimal configuration and don't want to split code into JS and HTML, And here is my solution.
Here what I found,
Bootstrap Version 4.5.2
Added popper js
Put your code in the data-content attribute.
Here is my HTML code
<pre><code>&lt;a tabindex=&quot;0&quot; html=&quot;true&quot; class=&quot;btn btn-sm&quot; role=&quot;button&quot; data-toggle=&quot;popover&quot; data-trigger=&quot;focus&quot; title=&quot;Dismissible popover&quot; data-content=&quot;And heres some &lt;b&gt;amazing content&lt;/b&gt;. Its very engaging. Right?&quot;&gt;Dismissible popover&lt;/a&gt;
</code></pre>
Here is my JS code
<pre><code> $('[data-toggle=&quot;popover&quot;]').popover({
 html : true
 }); 
</code></pre>

I am using an input group textbox and I need the Bootstrap 3 popover to work and the popover template should be defined &amp;n designed by me.
So the html I have currently with me is :

<pre><code>&lt;div class="row"&gt;
 &lt;div class="col-sm-2"&gt;
 &lt;div class="input-group"&gt;
 &lt;input type="text" class="form-control jq-timePicker" value="09:30"&gt;
 &lt;span class="input-group-addon" rel="popover"&gt;
 &lt;span class="glyphicon glyphicon-time"&gt;&lt;/span&gt;
 &lt;/span&gt;
 &lt;/div&gt;
 &lt;/div&gt;
&lt;/div&gt;
</code></pre>

I want a popover to open when the input group icon is click. In this case when the span with class glyphicon-time is clicked a popover is or displayed with the following HTML:

<pre><code>&lt;div class="timePickerWrapper popover"&gt;
 &lt;div class="arrow"&gt;&lt;/div&gt;
 &lt;div class="popover-content"&gt;
 &lt;div class="timePickerCanvas"&gt;&lt;/div&gt;
 &lt;div class="timePickerClock timePickerHours"&gt;&lt;/div&gt;
 &lt;div class="timePickerClock timePickerMinutes"&gt;&lt;/div&gt;
 &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

JS written:

<pre><code>$(document).ready(function () {
 var popoverTemplate = ['&lt;div class="timePickerWrapper popover"&gt;',
 '&lt;div class="arrow"&gt;&lt;/div&gt;',
 '&lt;div class="popover-content"&gt;',
 '&lt;div class="timePickerCanvas"&gt;&lt;/div&gt;',
 '&lt;div class="timePickerClock timePickerHours"&gt;&lt;/div&gt;',
 '&lt;div class="timePickerClock timePickerMinutes"&gt;&lt;/div&gt;',
 '&lt;/div&gt;',
 '&lt;/div&gt;'].join('');


 $('body').popover({
 selector: '[rel=popover]',
 trigger: 'click',
 template: popoverTemplate,
 placement: "bottom",
 html: true
 });
});
</code></pre>

See the fiddle here: <a href="http://www.bootply.com/4fMzxGRpik">http://www.bootply.com/4fMzxGRpik</a>

Can anyone please help me correcting what mistake I am doing and what needs to be done to display a popvhover.

Make bootstrap popover work with custom html template

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

 我正在使用一个输入组文本框，我需要Bootstrap 3弹出窗口的工作，弹出窗口模板应该是由我设计的定义和n。因此，我目前拥有的html是：  当输入组图标被点击时，我想打开一个弹出窗口。在这种情况下，当单击具有类glyphicon-time的跨度时，弹出窗口将与以下HTML一起显示：  JS写的： $(docume...

问使bootstrap popover与自定义html模板一起工作
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使bootstrap popover与自定义html模板一起工作EN