在Bootstrap Popover中调用两次内容函数
是指在Popover中使用两个不同的函数来动态生成内容。Popover是Bootstrap框架中的一个组件，用于在鼠标悬停或点击事件中显示弹出窗口。
在调用两次内容函数的情况下，可以通过以下步骤实现：
- 首先，需要在HTML页面中引入Bootstrap的相关文件，包括CSS和JavaScript文件。
- 在HTML页面中，创建一个元素作为Popover的触发器，可以是按钮、链接或其他元素。例如：
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="函数1的内容">Popover</button>- 在JavaScript代码中，使用jQuery或原生JavaScript来初始化Popover，并定义两个内容函数。例如：
$(function() {
$('[data-toggle="popover"]').popover({
content: function() {
return getContent1();
}
});
});
function getContent1() {
// 第一个内容函数的实现逻辑
return "函数1的内容";
}
function getContent2() {
// 第二个内容函数的实现逻辑
return "函数2的内容";
}- 在需要调用第二个内容函数的时候，可以使用JavaScript动态修改Popover的内容函数。例如：
$('[data-toggle="popover"]').popover('dispose'); // 销毁之前的Popover
$('[data-toggle="popover"]').popover({
content: function() {
return getContent2();
}
});通过以上步骤，就可以在Bootstrap Popover中调用两次内容函数。第一次调用时，使用第一个内容函数生成内容；第二次调用时，使用第二个内容函数生成内容。
关于Bootstrap Popover的更多信息和使用方法，可以参考腾讯云的相关产品和文档：
相关·内容
我想在bootstrap popover内部进行输入，然后我按回车键将输入保存到数据库中，但是带有keypress事件的代码不能处理popover输入，而是在popover之外的输入上工作。 $('.btn-danger').popover({content: "<input type='text' class='form-control' name = 'suma-budzet' id = 'suma-budzet'>", html: true,});
$('input&
浏览 22提问于2019-02-23得票数 2
回答已采纳
我有以下锚元素，当点击它时应该会显示一个Twitter Bootstrap Popover：
<a href="javascript:void(0)" class="popover_toggle" title="View Image">View Image</a>
我还使用了以下javascript来附加popover并为其设置默认标题：
$('.popover_toggle').popover({
title: 'Login Required!'
});
我希望Popover在ja
浏览 0提问于2013-07-05得票数 0
回答已采纳
JsFiddle：
我有一个bootstrap弹出窗口和一个调用弹出窗口的按钮。
我的目标是:我想要引入Intro.js特性：
第一步:点击按钮；
步骤2:这是弹出窗口。
Intro.js提供了一个能够以编程方式预定义步骤的选项。下面是我的introjs代码：
var intro2 = introJs();
intro2.setOptions({
exitOnOverlayClick: true,
showBullets: false,
//showStepNumbers: false,
steps: [
{
el
浏览 0提问于2016-04-15得票数 3
3回答
当我用ajax加载Bootstrap popver内容时，popover不显示。
Javascript：
var id = 1;
$.post("load.php?pageid",
{
pageid:id;
},
function(data,status){
document.getElementById("body").innerHTML=data;
});
HTML响应：
<a href="#" id="example"
浏览 0提问于2014-03-09得票数 8
回答已采纳
1回答
我正在尝试打开另一个弹出框中的一个子菜单，但我在这样做时遇到了困难。下面是示例代码
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http
浏览 2提问于2018-01-05得票数 0
回答已采纳
2回答
触觉与点击的不同行为
、、、
我在我的UI中使用Bootstrap Popover来提供“帮助文本”。
我现有的JavaScript：
// add "tooltips" via popover
$('[data-toggle="popover"]').popover({
container: 'body',
trigger: 'hover',
placement: 'auto bottom'
});
当我用鼠标悬停或触摸元素时，Popover会显示。我的问题是锚标记元素。如果Popover是由触摸事件触
浏览 5提问于2015-07-02得票数 2
回答已采纳
我不知道如何使爆米花工作，如：。
文档讨论了popover支持的插件和工具提示插件，因此我修改了我的webpack.config.js以添加这两个插件，现在看起来如下所示：
...
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
Popper: ['popper.js', 'default'],
Popover: 'exports-loader?Po
浏览 2提问于2017-10-17得票数 1
回答已采纳
我正在尝试让Bootstrap 2的"popovers“：
A)使用动态生成的内容，并
B)在弹出窗口内显示图像。
我当前的代码：
var image = '<img src="img/header/'+selection+'" />';
var previewLink = '<a class="headerPreview" href="#" rel="popover" >(Hover to Preview) </a>';
$(
浏览 6提问于2012-10-20得票数 2
回答已采纳
Twitter有一个JavaScript插件，可以弹出一些小窗口(滚动到一个元素上，弹出一个提供额外信息的框)。此插件还使用bootstrap-twipsy.js文件。
这里有一个演示，如果你向下滚动到Popovers演示。
我已经在这个小提琴上复制了演示的代码
我还包含了必要的文件(bootstrap-popver.js和bootstrap-twipsy.js)，但滚动时弹出窗口不起作用。
谁能解释一下我做错了什么？
这是html
<a href="#" class="btn danger" rel="popover" data-cont
浏览 1提问于2011-12-27得票数 3
回答已采纳
2回答
我正在尝试使用getbootstrap站点中的示例代码popover元素。
环境:角8.0.0 JQuery 3.4.1 Popper.js 1.15.0自带4.3.1 ToolTip 1.6.1
angular.json我已经加载了脚本
"scripts": [
"node_modules/jquery/dist/jquery.min.js",
"node_modules/popper.js/dist/popper.min.js",
"node_modules/tooltip/dist/Tooltip.js",
浏览 0提问于2019-06-05得票数 4
1回答
我的ui-bootstrap-custom-0.12.1.js用于popover，默认位置设置为" top "，但是如果popover默认在顶部，我无法在popover中查看我的内容。有没有办法将弹出框动态定位到底部？
<div class="pagination-centered">
<h2>Title: {{item.title}}</h2>
<div popover="patientHover" popover-title="item.title" popover-plac
浏览 2提问于2015-04-15得票数 1
我对引导popover有问题，而且我一直对此感到困惑，甚至在我读了一些关于堆栈溢出的文章之后。这是我的完整代码，弹出器不起作用。我不知道为什么。有人能帮我吗？
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min
浏览 3提问于2014-04-06得票数 0
回答已采纳
1回答
我试着叫引导弹出从后面的代码。这是我的html
<head runat="server">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css"/>
<script src="scripts/Jquery-2.1.4.js"></script>
<script src="scripts/bootstrap-min.js"></script>
浏览 0提问于2016-04-21得票数 0
回答已采纳
3回答
新发布在这里的堆叠溢出，所以我提前道歉，如果我在这里搞砸了什么。
我在用推特的自带弹出。我的弹出程序似乎适用于我手动在HTML文档中输入的元素，但不是我通过Javascript / Ajax动态生成的元素。
例如，如果我手动将其直接添加到我的HTML文档中，则弹出程序似乎可以工作：
<p rel=popover data-content='It is so simple to create a tooltop for my website!' data-original-title='Twitter Bootstrap Popover'>hover
浏览 8提问于2012-08-14得票数 20
回答已采纳
我正试着把一些内容加载到引导程序的弹出程序中。该内容是隐藏的div的html元素，其中包括在对象列表下迭代的ng重复。好吧，起作用了。但是ng-点击在弹出窗口内不起作用。为了解决这个问题，根据我在堆栈溢出中看到的内容，我在将内容设置为popover时使用了$compile选项。是的，也很管用。但是，当我这样做时，对象列表会在其中被重复显示。有人能告诉我出什么事了吗？
angular.module("app", [])
.controller("progressBarCtrl", function($scope, $timeout, $compile
浏览 0提问于2015-09-02得票数 1
回答已采纳
我正在使用Bootstrap 4 popover，如下所示：
$('[data-toggle="popover"]').popover({
trigger: 'hover'
});
但是现在在jquery中，我动态地添加了一个元素。
var leaveUser = $('.popover').clone().prependTo('.new-popups');
但是.popover()并没有对这个新的动态添加元素生效。我怎么才能让它起作用？
浏览 4提问于2020-02-25得票数 1
回答已采纳
我在我的应用程序中使用bootstrap popover，我需要在它里面渲染一个插座。
我有这个嵌套的路由：
this.resource('pages', function(){
this.resource('page', { path: ':id' }, function(){
this.resource('edit', function(){
this.resource('images', function(){
this.reso
浏览 0提问于2015-01-09得票数 0
2回答
我有一个bootstrap popover，到目前为止一切工作正常。
然而，我遇到了麻烦事件。show.bs.popover和shown.bs.popover事件按预期工作，但是隐藏和隐藏事件似乎不会触发。
$('#element').popover({ >options here< })
.popover('show')
.on('show.bs.popover', function() {
...
})
.on('shown.bs.popover', function() {
...
})
.on('hid
浏览 0提问于2017-03-26得票数 0
如果我有一个可以触发Bootstrap的链接，我如何从链接中将文本拉到Popover内容中？
使用$(this).text()似乎不起作用。
因此，考虑到HTML：
<a href="#">Get this text into the popover.</a>
这个JQuery：
$('a').popover({
content: $(this).text()
});
我希望弹出内容是“把这个文本放到波波夫”。
谢谢!
浏览 0提问于2013-08-15得票数 0
回答已采纳
7回答
为什么我的鞋带不起作用？
、、、、
我正在尝试使用。所以我把这个例子中的确切代码复制到我的网站上，不幸的是，这个网站不起作用。我粘贴了下面的完整代码并创建了。
我试着把它放在一个引导容器中，并放在行和列中，但是似乎没有什么工作。
有谁能让我的小提琴起作用吗？欢迎所有小费！
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//co
浏览 17提问于2015-05-05得票数 12
回答已采纳
2回答
bootstrap popover当前预期如下：
<a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
$("#e
浏览 1提问于2012-03-29得票数 3
回答已采纳
2回答
我有一个HTML表：
<table id="PeopleTable" class="table table-striped table-bordered">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Pop</th>
</tr>
</thead>
<tbody>
<tr><td>0&
浏览 5提问于2017-01-25得票数 0
回答已采纳
我有mootools和Twitter引导程序(它使用JQuery来实现Javascript功能)，它们使用JQuery.NoConflict()在引导文件中“很好”地工作。
好吧，现在我正在尝试使用引导-popover.js，但它的工作并不像引导-dropdown.js.‘s那么顺利。嗯，我想这是一个兼容性模式的问题，我无法很好地理解。
我有一个错误的javascript：
<script type="text/javascript">
$(function () {
$('td[rel=popover]')
.popover({
浏览 3提问于2011-12-18得票数 0
我正试图在我的页面上添加引导弹出。
我有以下代码
$("#s1").popover({ placement: 'top' }).popover("show");
我已将下列文件添加到我的页面
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script src="Scripts/jquery-1.4.1.js" type="text/javascri
浏览 1提问于2015-01-02得票数 0
回答已采纳
我是一个相当新的rails程序员(大约一年左右)，正在做我的第一个大项目。它是用haml btw写的。
下面是我的_loginaside.haml代码：
%a.btn.btn-info{"data-content" => "A larger popover to demonstrate the max-width of the Bootstrap popover.", "data-toggle" => "popover", href: "#", title: "Popover title"
浏览 1提问于2014-06-08得票数 0
1回答
在之后，我尝试实现一个隐藏的回调函数，但是虽然show回调工作得很好，但是没有办法使hidden回调工作。有人能解释一下为什么会这样吗？
我创建了来复制这个问题。
$(document).ready(function() {
var showCb = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
showCb.call(this);
if (this.options.showCb) {
this.option
浏览 0提问于2020-02-08得票数 2
我已经尝试了这个论坛上的各种答案，但都没有成功。我正在尝试让我的bootstrap弹出窗口“跟随”在调整页面大小时触发它的元素。挑战是弹出是动态生成的，所以我不能给出一个具体的id。
我的代码重新定位了popover，但它在调整大小的过程中不愉快地闪烁，并且它以不可见的popover结束。
如何隐藏弹出窗口，然后在调整大小时再次显示它？
我的代码是：
// Reposition popover when screen changes size
$(window).on('resize', function() {
$('[data-toggle="po
浏览 0提问于2016-09-09得票数 3
我在使用Bootstrap 4 popovers时遇到了问题。
我的页面有几个div，每个div都包含弹出窗口的内容，例如，
<div class="d-none" id="popover-content-cld">
<p>An infant is considered to have Chronic Lung Disease (CLD): [...]</p>
</div>
当用户单击此链接时，应使用此弹出窗口：
<a tabindex="0" role="button" hr
浏览 4提问于2018-09-08得票数 1
我想尝试使用asp.net ive已经尝试过的引导弹出，并寻找这样做的方法。
函数pageLoad(发送方，args) {$(‘数据-切换=“popover”’).popover({ html: true，放置：“底部”，内容:函数() {返回$('#PopoverConditionMasterPart').html()；}；}；
}；但仍然没有明显的迹象表明。
在我的调试器中，我看到像$这样的错误没有定义，而且.popover不是一个函数。
另一个问题是，本教程的大部分内容都在MVC中。
有人能给我建议或者更好的解释吗。
提前感谢，继续前进！
以下是我目前的工作：
c
浏览 0提问于2017-10-05得票数 0
2回答
要求是什么意思？
、、
在中"//=需要引导/词缀“是什么意思？
//= require bootstrap/affix
//= require bootstrap/alert
//= require bootstrap/button
//= require bootstrap/carousel
//= require bootstrap/collapse
//= require bootstrap/dropdown
//= require bootstrap/tab
//= require bootstrap/transition
//= require bootstrap/scrollspy
//= re
浏览 2提问于2014-06-09得票数 1
回答已采纳
我在Django上使用bootstrap，到目前为止一切都正常。然而，我正在尝试使用popover功能，但我总是遇到一个问题。无论何时点击我的弹出窗口，页面都会滚动回到顶部...但是弹出窗口确实出现了。下面是我的代码：
//////////<..... a lot more HTML ....>//////////
<div class="bs-docs-example">
<a href="#" class="btn btn-large btn-danger" rel="popover" title
浏览 0提问于2012-09-26得票数 37
回答已采纳
Popovers目前似乎对我不起作用。我成功地将twitter-bootstrap gem用于其他功能(如carousel)，并且可以看到工具提示和弹出窗口已加载到页面的源代码中：
<script src="/assets/bootstrap-tooltip.js?body=1" type="text/javascript"></script>
<script src="/assets/bootstrap-popover.js?body=1" type="text/javascript"><
浏览 0提问于2012-07-13得票数 0
1回答
我使用的是Bootstrap popover和数据库中的动态内容。在php中，它为每个popover创建动态类。我的问题是，在jquery中，是否需要调用以单独触发popover？
我就是这样用jQuery触发爆米花的-
$(".image-info-popover-1").popover({
html : true,
placement : 'left',
trigger: 'hover',
content: function() {
return $(&
浏览 4提问于2015-03-30得票数 1
回答已采纳
1回答
我试图让一个facebook共享按钮在引导弹出程序中工作。
但是它不起作用，弹出程序可以工作，但是内部的共享按钮是不可见的。
代码：
$('[data-toggle="popover"]').popover({
trigger: 'click',
html : true,
content: function() {
var content = '<div id="fb-root"></div><div class="fb-sha
浏览 0提问于2019-01-17得票数 0
回答已采纳
在更新到bootstrap 2.3.0之后，我注意到popover工具提示的奇怪行为。
如果您输入该字段并尝试离开，工具提示将消失并隐藏输入字段。这个问题只在最新版本的bootstrap上出现，不确定到底有什么变化，但2.2.2在Prototype上工作得很好。
jQuery.noConflict();
jQuery('input[data-content]').popover({
trigger: 'focus'
});
下面是一个工作示例：
浏览 0提问于2013-02-26得票数 12
回答已采纳
我有一个下面的按钮，当点击时会显示一个类似通知的小弹出窗口
<button id="element" type="button" onclick="ShowNotifications()" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Text inside popup">Notificati
浏览 48提问于2014-03-28得票数 20
回答已采纳
1回答
我试图查看不同的来源，也查看论坛张贴类似的问题，但它并没有很好地帮助我的问题，我面临的。我有一个文本输入字段，我在其中添加了一个弹出窗口，以显示数据库中类似的名称列表。inout字段检查验证，以查看输入的名称是否唯一，如果没有，则显示数据库中可重用的相似名称。下面是罂粟片段：
$("#account_name_create").popover({
title: 'Twitter Bootstrap Popover',
content: function (process) {
浏览 4提问于2014-10-21得票数 0
回答已采纳
<div class="btn-group">
<button class="btn dropdown-toggle" data-toggle="dropdown"> Reviews </button>
<button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
&
浏览 0提问于2012-08-14得票数 1
回答已采纳
1回答
我正在尝试动态创建一个Bootstrap弹出窗口。我正在使用以下代码，但它没有显示任何内容。
function showDictionaryPopup(term) {
// create popover div
var popoverDiv = $("<div>");
popoverDiv.attr("data-toggle","popover");
popoverDiv.attr("data-content","This is a test");
popoverDiv.addClass("
浏览 1提问于2015-02-13得票数 0
1回答
我试着像一样使用弹出窗口，所以当你点击一个按钮时，它就会出现，当你点击它时，它就会消失。
我在application.js中有
//= require bootstrap-tooltip.js
//= require bootstrap-popover.js
$(function () {
$('.popover-test').popover();
})；
在我看来，_fof.html.erb
<button class="popover-test" id="button1" data-content="Popover Conten
浏览 1提问于2012-11-28得票数 0
4回答
这是我的代码，但它不会工作。 当我在内容中使用原生Bootstrap PopOver时，前端不会显示该PopOver，并且HTML的格式不正确。 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.
浏览 27提问于2017-12-08得票数 11
回答已采纳
其他人问了这个问题，但没有给出答案或解决方案。
这些引导文件列在我的application.js文件的顶部：
...
//= require bootstrap-tooltip
//= require bootstrap-popover
...
我的bootstrap_additions.js.coffee文件包含：
$("a[rel=popover]").popover()
$(".tooltip").tooltip()
$("a[rel=tooltip]").tooltip()
在我看来：
<a href="#" cla
浏览 2提问于2012-11-14得票数 8
回答已采纳
我将bootstrap popover与vuejs结合使用。
如何触发vue功能？
在下面的代码中，当我单击add break链接时，它用click me按钮打开bootstrap popover。现在vuejs不起作用了，如果我点击click me，它就不会提示警报。
<a data-toggle="popover" data-placement="top" v-d2d-popover data-content='<button v-on:click="alert(6)">click me</button&g
浏览 4提问于2016-02-05得票数 1
我正在尝试创建一个popover，但由react-bootstrap文档提供的popover示例不起作用。我试图做各种调整来解决，但被卡住了。 import React from "react"
import Popover from "react-bootstrap/Popover"
import OverlayTrigger from "react-bootstrap/OverlayTrigger"
import Button from "react-bootstrap/Button"
class PopoverExamp
浏览 20提问于2019-08-14得票数 1
回答已采纳
2回答
我从W3学校网站获得了这种引导弹出，并为我的情况编辑了代码(请参阅onPopoverHtmlLoad()函数)：
<!DOCTYPE html>
<!-- https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_popover&stacked=h -->
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8
浏览 2提问于2019-03-17得票数 1
回答已采纳
1回答
我正在尝试在Popover中包含一个开关，它是使用Bootstrap 4创建的。问题是，这个开关可以输出弹出，而不是在内部。
示例
<html>
<head>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js
浏览 3提问于2021-03-04得票数 0
回答已采纳
我在事件上初始化了bootstrap popover，在popover内容中我有按钮(单击按钮调用函数，该函数使用event.setExtendedProp()方法更改相关事件的extendedProp.status )
//above of my code FullCalendar has rendered and set as variable var = calendar
eventDidMount: function (info) {
$(info.el).popover({
html: true,
content
浏览 4提问于2020-12-15得票数 1
我想为Bootstrap Popover特性创建一个指令。
控制器：
var app = angular.module('firstApp', ['ui.bootstrap']);
app.directive('popover', function() {
return function(scope, elem) {
console.log(elem)
elem.popover({trigger: 'hover','placement': 'left'});
}
浏览 2提问于2014-05-28得票数 0
回答已采纳
我一直在尝试让bootstrap popovers在Wordpress循环中工作，但没有成功，这就是我到目前为止所做的：
<?php while($have_posts()): $the_post();
$excerpt = strip_tags(get_the_excerpt());?>
<a class="<?php echo the_ID()?>" href="<?php echo the_permalink();?>"><?php echo the_title();?></a&g
浏览 0提问于2013-01-04得票数 0
回答已采纳
我试图将bootstrap popover内容从html属性中分离出来，就像你可以对其他组件所做的那样，但我无法让它工作……
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1&#
浏览 0提问于2015-06-06得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
