阻止bootstrap popover清除内容
Bootstrap Popover是一种常用的前端组件，它可以在用户操作或鼠标悬停时显示弹出框，通常用于显示额外的信息或提供交互功能。
阻止Bootstrap Popover清除内容的方法可以通过以下两种方式实现：
- 使用
data-trigger属性：在HTML元素中使用data-trigger属性，并将其值设置为manual，这样Popover就不会在触发事件后自动清除内容。例如：
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="manual" data-content="Popover Content">Toggle Popover</button>然后，在JavaScript中手动控制Popover的显示和隐藏，并使用popover('show')方法显示Popover，popover('hide')方法隐藏Popover。例如：
$('[data-toggle="popover"]').popover({
trigger: 'manual'
}).on('click', function () {
$(this).popover('show');
}).on('mouseleave', function () {
var _this = this;
setTimeout(function () {
$(_this).popover('hide');
}, 200);
});- 使用JavaScript控制显示和隐藏：使用JavaScript代码来控制Popover的显示和隐藏，并在触发事件后手动添加和移除Popover的内容。例如：
<button type="button" class="btn btn-primary" onclick="togglePopover()">Toggle Popover</button>
<div id="popoverContent" style="display: none;">Popover Content</div>然后，在JavaScript中定义togglePopover()函数，通过操作元素的innerHTML属性来添加和移除Popover的内容，并使用style.display属性来切换内容的显示和隐藏。例如：
function togglePopover() {
var popoverContent = document.getElementById('popoverContent');
if (popoverContent.style.display === 'none') {
popoverContent.innerHTML = 'Popover Content';
popoverContent.style.display = 'block';
} else {
popoverContent.innerHTML = '';
popoverContent.style.display = 'none';
}
}这样就可以阻止Bootstrap Popover清除内容，并实现自定义的内容显示和隐藏控制。这个方法适用于需要在Popover中显示动态内容或需要保留Popover内容的场景。
腾讯云相关产品中，可以使用腾讯云的服务器less组件SCF（Serverless Cloud Function）来实现自定义控制Popover显示和隐藏的功能。SCF是一种无服务器计算服务，可实现按需分配资源并自动扩缩容的功能，适用于处理突发性负载和事件驱动的场景。您可以使用SCF编写自定义的业务逻辑代码，并结合其他腾讯云服务如腾讯云API网关、腾讯云COS（对象存储服务）等，来构建更复杂的应用程序。具体更多关于SCF的信息和产品介绍，请参考腾讯云官网文档：腾讯云Serverless Cloud Function（SCF）
请注意，以上答案仅供参考，具体实现方法可能因具体情况而异。
相关·内容
2回答
引导:弹出按钮链接不工作
、、、
我使用了引导弹出和一些定制的jquery。：如果我添加了一个带有外部链接的按钮，它就不能工作。查看代码：有两个按钮"Button1“用于Popover & "Button2”用于外部链接。
$(document).ready(function () {
$("body").tooltip({
selector: "[data-toggle='tooltip']",
container: "body"
})
.popover({
selector: "[d
浏览 1提问于2016-11-17得票数 0
我在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
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
回答已采纳
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
回答已采纳
我试图将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
4回答
演示：
我正在尝试打开Bootstrap的自动打开循环，但到目前为止，我只设法自动播放一次。
HTML：
<div class="container">
<a href="#" title="Header"class="myclass p1" data-toggle="popover" data-trigger="hover" data-placement="left" data-content="Some content">Hove
浏览 5提问于2017-04-21得票数 0
回答已采纳
1回答
弹出盒阴影也需要用于箭头
、、、
默认情况下，引导程序有弹出框阴影。但我需要和弹射箭一样的影子。如何才能只为箭头边框获得阴影。
我是
有人能帮上忙吗。
$(function () {
$('#example').popover();
});
a{
margin-top:100px;
}
.popover-content{
min-height:200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<scri
浏览 1提问于2016-06-07得票数 3
回答已采纳
2回答
我正在尝试使用引导程序创建一个弹出程序库，下面是版本，为什么他不给我看设计呢？有人知道问题出在哪里吗？
package.json*
"private": true,
"dependencies": {
"@angular/animations": "~11.0.1",
"@angular/cdk": "^11.0.2",
"@angular/common": "~11.0.1",
"
浏览 3提问于2021-01-13得票数 0
1回答
我希望我的弹出显示多个数据内容，即3个不同的文本行内的弹出。我有以下代码，参考自w3schols。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<
浏览 8提问于2016-06-11得票数 1
我将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
我想为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
回答已采纳
2回答
单击收件箱按钮时，它将运行inbox_open()函数，并在收件箱标题中显示3个按钮，但缺少onclick事件侦听器。检查// inbox.open注释后的代码，关键行：b.onclick = function() { console.log("button was clicked"); }和inbox.setAttribute("title", poH.innerHTML);
// inbox
var inbox = document.getElementById("inbox");
var inbox_news = document.ge
浏览 0提问于2018-05-11得票数 5
回答已采纳
我正在尝试让bootstrap与Vue CLI一起工作。我像这样安装了jQuery和Bootstrap：
npm install jquery bootstrap
然后对webpack进行如下配置：
module.exports = {
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
tether:
浏览 18提问于2018-01-03得票数 0
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本身悬停时保持它的活动状态，但是一旦用户停止悬停在按钮上，它就消失了。我该怎么做呢？
$('#example').popover({
html : true,
trigger : 'manual',
content : function() {
return '<div class="box">Popover</div>';
}
});
浏览 8提问于2013-04-13得票数 130
回答已采纳
1回答
我正在尝试使用在单击<span>元素时弹出一个弹出窗口。
所有的文件都包含在页面上，包括bootstrap-tooltip.js和bootstrap-popover.js。这是我调用popover的jQuery代码：
$('#supported-hosts').popover({
'animation': true,
'html': 'test',
'trigger': 'click'
});
但是，当我单击该元素时，什么也不会发生。
$('#suppo
浏览 2提问于2013-01-30得票数 0
回答已采纳
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
回答已采纳
我正在尝试实现Bootstrap JS的Popover ()，但由于某些原因，它并没有像预期的那样出现。
这就是我所得到的
如你所见，Popover的机身向左移动，边框有点破损。
这是我的代码
<a class="btn success" id="previewBeforeSubmit" href="#"
data-original-title="Test" data-content="Lorem Ipsum">Save Changes</a>
<script type
浏览 0提问于2011-09-26得票数 2
回答已采纳
1回答
引导弹出窗口未与箭头对齐
、、、
我在我的一个项目中使用了bootstrap popovers，我遇到了一个问题。我的弹出窗口被向上推，因为它击中了我可见屏幕的底部，但当我向下滚动时，它并没有向下移动以与箭头对齐。
这是一张发生在现场的照片，看我已经向下滚动了，但它并没有随我一起向下移动。
编辑:代码
$(document).ready(function(){
$("[data-toggle=popover]").popover({
trigger: 'hover',
html: true
})
});
<link rel="stylesheet" hre
浏览 8提问于2017-10-23得票数 1
我正在尝试将样式应用于的Bootstrap 3 Popover
下面的ruke将新样式应用于所有Popover
.popover {
color: red;
}
但只需要将其应用于与#pop div相关联的弹出窗口。我已经试过了
#pop .popover {
color: red;
}
或
#pop> .popover {
color: red;
}
但他们也没有做好这项工作。
谢谢
浏览 1提问于2014-10-26得票数 0
使用Bootstrap 3，我尝试在动态弹出程序中添加一个新的HTML元素，如
$(document).on('click', '#send-app', function(){
console.log("Clicked!");
$("#result").html('<p>New HTML Element</p>');
});
但它不起作用！我怎么才能解决这个问题？
$("[data-toggle=popover]").popover({
html: tr
浏览 1提问于2017-05-06得票数 1
回答已采纳
我不知道如何使爆米花工作，如：。
文档讨论了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
回答已采纳
我找不到完整的文档。例如，popover效果()将使用DOM的data-origin-title属性作为其自身的标题，并使用data-cotent作为其内容：
$('#somedom').hover (->
$(this).addClass("hover")
$(this).attr("data-original-title","Location")
$(this).attr("data-content":'The popover plugin provides a simpl
浏览 0提问于2011-10-11得票数 0
回答已采纳
1回答
这里我已经创建了弹出指令，我需要将它应用于父级和子级。当我点击子的时候，所以也显示了.how，我可以阻止事件传递给父进程。如何使用jquery event.StopPropogation ()？
指令代码：
var bootstrap = angular.module("bootstrap", []);
bootstrap.directive('myBox', function ($compile) {
return {
restrict: "E",
transclude: true
浏览 5提问于2014-05-26得票数 0
2回答
自助旅游不起作用
、、、、
我正在测试一个非常简单的测试页面，我已经设置了启动带巡回赛。内容显示，但由于某种原因，旅游功能不起作用。有人能告诉我我可能做错了什么吗？
谢谢:)
请在下面找到我的代码
<html>
<head>
<meta charset="utf-8">
<title> This is a testing page for bootstrap tour </title>
<link href="../bootstrap/css/bootstrap.min.css" rel="
浏览 0提问于2016-11-14得票数 0
回答已采纳
我正在使用Bootstrap 4 popover，如下所示：
$('[data-toggle="popover"]').popover({
trigger: 'hover'
});
但是现在在jquery中，我动态地添加了一个元素。
var leaveUser = $('.popover').clone().prependTo('.new-popups');
但是.popover()并没有对这个新的动态添加元素生效。我怎么才能让它起作用？
浏览 4提问于2020-02-25得票数 1
回答已采纳
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
回答已采纳
我有一个html按钮：
<button data-toggle="popover" data-placement="bottom" title="" data-content="Dart. <a href='https://www.dartlang.org/'>Link</a>" data-original-title="Popover">Dart</button>
从Dart电线中，按钮作为popover元素：
$('[data-toggle
浏览 2提问于2013-12-17得票数 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
回答已采纳
我在事件上初始化了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
我安装了以下软件包： npm install --save react-bootstrap bootstrap 我正在尝试使用一个提供的here示例添加一个弹出式窗口。 这是确切的代码： import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import Popover from 'react-bootstrap/Popover';
import OverlayTrigger from 'react-bootstrap/OverlayTrigg
浏览 21提问于2020-08-11得票数 2
我使用的是AngularJS (1.2.10)，我有一个表单，它是一个超文本标记语言模板，它通过一个指令公开，该指令使用bootstrapvalidator来验证一些表单域。表单域具有附加的特殊信息按钮，这些按钮使用弹出框来提供有关每个域的进一步指导。
我遇到的问题是，当触发器按钮在来自指令的模板中时，弹出窗口不会触发，但如果按钮在指令之外，则弹出窗口工作得很好，如下面的Plunk所示。
请检查此Plunk中的所有代码：
主要指令：
(function(angular) {
'use strict';
angular.module('appointmentsApp&#
浏览 2提问于2015-03-15得票数 0
设置问题，这是情况，问题，屏幕截图和代码
的情况：
在我的响应型bootstrap3布局中，有一个navbar，即fixed-top。
我已经准备好了collapse信息，如文档所示。
navbar中有一个按钮/链接来调用popover。
问题：
当navbar处于折叠状态时，popover隐藏在分配给navbar选项的可滚动区域中。
截图：
HTML:
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div
浏览 7提问于2014-01-13得票数 2
我正在尝试保持Bootstrap3 popovers的活动状态，同时popovers被悬停。我使用的是OkezieE在这个的答案中建议的JQuery代码，它在标准使用下工作得很好：
$(".pop").popover({ trigger: "manual" , html: true, animation:false})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover"
浏览 0提问于2015-09-11得票数 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
我有一个Bootstrap弹出式图像，应该会显示弹出。这个IMG在一个有它自己的点击处理程序的A链接里面。
我的目标是防止家长A-Click触发；当您单击图像时，您唯一能看到的是弹出窗口，而不是真正的A-Click操作(警告框)。
我知道这是通过e.stopPropagation()完成的，但问题是，我如何访问Bootstrap Popover的点击处理程序？我该把e.stopPropagation放在哪里呢？
$('[data-toggle="popover"]').popover();
$('#link').off('click
浏览 1提问于2017-12-08得票数 1
我调用bootstrap twitter库的js文件，但得到的错误指示
$("a[rel=popover]").popover is not a function
。
<script src="../../jq/jquery-1.7.1.min.js" type="text/javascript"></script>
<script src="../../bootstrap/js/bootstrap.js" type="text/javascript"></script&g
浏览 0提问于2012-04-23得票数 3
回答已采纳
我已经修改了bootstrap的popover函数，使其包含一个回调函数，效果非常好。但是在回调中，我不能以编程方式关注第一个表单域。奇怪，因为我可以操作回调函数中的其他元素，也可以将焦点放在其他点的元素上。
下面是添加回调的代码，这是我从另一个SO问题()得到的：
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
tmp.call(this);
if (this.options.callback) {
this.o
浏览 1提问于2013-07-01得票数 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
回答已采纳
2回答
我使用的是twitter-bootstrap。
下面的代码启用了popover，当用户按下一个按钮时它就会出现。
我想在页面加载时将弹出窗口显示为默认值。有可能吗？
<li>
<a data-original-title="Popover on top" href="#" class="btn" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laor
浏览 2提问于2013-03-31得票数 0
回答已采纳
我想使用带有ajax模板的Bootstrap Popover。下一个脚本运行良好..。
$('.popover-trigger').bind('click', function(k) {
var e=$(this);
title="Jeepieee"
$.get('/popover/'+e.data('pophtml'),function(d) {
e.popover({
浏览 3提问于2016-06-25得票数 0
4回答
单击“弹出”不起作用
、、、
在使用以下代码对一个data-lang标记进行click事件之后，我尝试获取a值：
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(
浏览 1提问于2018-07-09得票数 1
回答已采纳
我对Bootstrap (3.3.4)弹出窗口有问题。我的弹出窗口的html代码在data-html标记中，它还包含一个类link_click。此类的jQuery单击函数不起作用。为什么jQuery在弹出窗口的数据内容字段中看不到这个link_click类？有什么要改变的？
popover = '<a href="javascript:void(0)" data-toggle="popover" data-placement="bottom" data-html="true" data-content="&l
浏览 3提问于2015-06-02得票数 0
1回答
在我的django应用程序中使用popover有一些奇怪的问题。当使用最新版本的的css和js时，bootstrap根本无法工作。当我使用指向3.4.1版本的链接时，我发现在一些教程中，一切都很好。我在附加不起作用的代码和不工作的代码。
在最新的引导程序中，popover函数被删除了吗？
工程(3.5.1)：
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="{
浏览 2提问于2020-12-02得票数 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
回答已采纳
我正在尝试将内容动态加载到Bootstrap弹出窗口中。当表单提交时，我可以提醒值，这是正确的工作。我不能做的是让#popover-thanks的内容加载在弹出窗口中，用一条感谢消息替换表单。
// show the popover
$('#btn').popover({
html : true,
placement: 'top',
content: function() {
return $('#popover-form').html();
}
});
// form has been sub
浏览 1提问于2014-07-21得票数 0
回答已采纳
1回答
我有一个组件“引导表”的问题。我有一列在单击时显示一个简单的弹出，但是如果我更改页面或搜索结果，如果我重新单击它，就不会再显示该弹出(这个问题不仅发生在popover，而且还发生在其他js方法中)。即使我使用DataTable，这个问题也不会发生。我怎么才能修好它？这是我的密码：
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap
浏览 2提问于2017-03-29得票数 0
如何动态更新弹出内容？ 嗨，我正在尝试建立一个静态网站上的搜索栏，产生一个弹出式列表的数据。搜索栏应该过滤掉数据列表，然后更新html代码并将其发送到popover函数。下面是我的CodePen代码的演示 https://codepen.io/phat-xluong/pen/YzqLWwz 以下是我的问题:搜索会过滤数据列表。更新数据列表，但不将html内容传送到弹出框。 JS代码 //POPOEVER PART 1 - CODE TO HANDLE SEARCH/FILTER FUNCTION FOR POPOVER CONTENT ON SEARCH BAR
// INITIATE F
浏览 96提问于2020-09-12得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
