如何使用鼠标悬停显示弹出窗口来获取 div id?
How to get div id using mouseover to show popover?
假设,我有很多 div。现在我想显示单独的弹出窗口,div 明智。我使用了鼠标悬停。它运作良好。但是第一次没有工作。当我第二次移动鼠标时,它起作用了。
这是我的代码:
$(document).ready(function() {
$(".popper").one('mousemove', function() {
var messageId = this.id;
console.log(messageId);
$("#" + messageId).popover({
placement: 'bottom',
container: 'body',
html: true,
content: function() {
return $('.popper-content-' + messageId).html();
}
});
});
});
body {
padding: 10px 120px;
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div>
<div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div>
<div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div>
<div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>
如何在第一次显示弹出框?
请帮忙。
提前致谢!
您必须先悬停并手动显示 popover()
,因为稍后要构建它。
.popover('show');
示例片段
$(document).ready(function() {
$(".popper").one('mousemove', function() {
var messageId = this.id;
console.log(messageId);
$("#" + messageId).popover({
placement: 'bottom',
container: 'body',
html: true,
content: function() {
return $('.popper-content-' + messageId).html();
}
}).popover('show');
});
});
body {
padding: 10px 120px;
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div>
<div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div>
<div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div>
<div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>
假设,我有很多 div。现在我想显示单独的弹出窗口,div 明智。我使用了鼠标悬停。它运作良好。但是第一次没有工作。当我第二次移动鼠标时,它起作用了。
这是我的代码:
$(document).ready(function() {
$(".popper").one('mousemove', function() {
var messageId = this.id;
console.log(messageId);
$("#" + messageId).popover({
placement: 'bottom',
container: 'body',
html: true,
content: function() {
return $('.popper-content-' + messageId).html();
}
});
});
});
body {
padding: 10px 120px;
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div>
<div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div>
<div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div>
<div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>
如何在第一次显示弹出框?
请帮忙。
提前致谢!
您必须先悬停并手动显示 popover()
,因为稍后要构建它。
.popover('show');
示例片段
$(document).ready(function() {
$(".popper").one('mousemove', function() {
var messageId = this.id;
console.log(messageId);
$("#" + messageId).popover({
placement: 'bottom',
container: 'body',
html: true,
content: function() {
return $('.popper-content-' + messageId).html();
}
}).popover('show');
});
});
body {
padding: 10px 120px;
}
.red {
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<a class="popper btn btn-outline-warning" id="1" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="2" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="3" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<a class="popper btn btn-outline-warning" id="4" data-bs-trigger="hover" data-bs-toggle="popover">Hover me</a>
<div class="popper-content-1 d-none">My <b class="red">first</b> button popover content goes here.</div>
<div class="popper-content-2 d-none">My <b class="red">second</b> button popover content goes here.</div>
<div class="popper-content-3 d-none">My <b class="red">third</b> popover content goes here.</div>
<div class="popper-content-4 d-none">My <b class="red">fourth</b> popover content goes here.</div>