我正在尝试制作一个弹出窗口,当用户将鼠标悬停在其上方时,该弹出窗口将保留在其位置,但仅适用于太大而无法在屏幕上显示的元素。
我有以下代码,这是我要执行的操作的错误实现:
<template>
<div class="row">
<div class="col-sm-12">
<h3 class="pb-2 mt-4 border-bottom mb-2">Cabinets</h3>
<table class="table table-hover text-truncate table-no-overflow">
<thead>
<tr>
<th>{{ $t('entity.kitchen.kitchen') | capitalize }} </th>
<th>{{ $t('entity.cabinet.url') | capitalize }}</th>
<th>{{ $t('entity.cabinet.anotherUrl') | capitalize }}</th>
<th>{{ $t('entity.cabinet.date') | capitalize }}</th>
<th>{{ $t('entity.cabinet.time') | capitalize }}</th>
</tr>
</thead>
<tbody>
<tr v-if= "cabinet.length === 0"> <td colspan="5"><i class="alert-light">{{ $t('component.cabinet.message.noCabinet') }}...</i></td> </tr>
<tr v-for="(cabinet, i) in cabinets">
<td>{{ cabinet.kitchen.id }}</td>
<td>{{ cabinet.url }}</td>
<td>{{ cabinet.anotherUrl }}</td>
<td>{{ cabinet.time.date }}</td>
<td>{{ cabinet.time.time }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<script>
import JQuery from 'jquery';
let $ = JQuery;
$(document).on('mouseenter', "table.table-no-overflow > tbody > tr > td", function () {
let $this = $(this);
$this.popover({
title: $this.text(),
placement: "right",
container: "body",
html: true,
trigger: 'manual',
animation:false
});
$this.popover('show');
});
$(document).on('mouseleave', "table.table-no-overflow > tbody > tr > td", function () {
let $this = $(this);
setTimeout(function () {
if (!$('.popover:hover').length) {
$this.popover('hide');
}
}, 100);
});
</script>
<style scoped>
table.table-no-overflow {
table-layout: fixed;
}
table.table-no-overflow td {
white-space: nowrap;
text-overflow:ellipsis;
overflow: hidden;
}
</style>
以下是有什么问题,这是我的鼠标悬停前的外观:
这是悬停后的样子:
当不再位于元素上时,它基本上不会删除弹出窗口(导致同时具有多个弹出窗口),并且还会为不需要它的Time元素显示该弹出窗口。我不确定自己在做什么错,也不确定该如何解决?
相关信息:不确定是否重要,但我也在此页面中使用Vue。
最佳答案
它可以像这样工作:
1.仅在要显示弹出窗口的表单元格上添加数据属性“ canPopup”。这将防止“时间”元素显示弹出窗口。
<template>
<div class="row">
<div class="col-sm-12">
<h3 class="pb-2 mt-4 border-bottom mb-2">Cabinets</h3>
<table class="table table-hover text-truncate table-no-overflow">
<thead>
<tr>
<th>{{ $t('entity.kitchen.kitchen') | capitalize }} </th>
<th>{{ $t('entity.cabinet.url') | capitalize }}</th>
<th>{{ $t('entity.cabinet.anotherUrl') | capitalize }}</th>
<th>{{ $t('entity.cabinet.date') | capitalize }}</th>
<th>{{ $t('entity.cabinet.time') | capitalize }}</th>
</tr>
</thead>
<tbody>
<tr v-if= "cabinet.length === 0"> <td colspan="5"><i class="alert-light">{{ $t('component.cabinet.message.noCabinet') }}...</i></td> </tr>
<tr v-for="(cabinet, i) in cabinets">
<td>{{ cabinet.kitchen.id }}</td>
<td data-canPopup>{{ cabinet.url }}</td>
<td>{{ cabinet.anotherUrl }}</td>
<td>{{ cabinet.time.date }}</td>
<td>{{ cabinet.time.time }}</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
2.相应地修改Mouseenter和Mouseleave事件选择器。首先,在关闭弹出窗口之前,请禁用100ms超时,以防止一个弹出窗口重叠显示在另一个弹出窗口上。 (可选)启用动画以允许弹出窗口淡入和淡出。
$(document).on('mouseenter', "table.table-no-overflow > tbody > tr > td[data-canPopup]", function () {
let $this = $(this);
$this.popover({
title: $this.text(),
placement: "right",
container: "body",
html: true,
trigger: 'manual',
animation:true
});
$this.popover('show');
});
$(document).on('mouseleave', "table.table-no-overflow > tbody > tr > td[data-canPopup]", function () {
$(this).popover('hide');
});
关于jquery - 如何使Bootstrap popover更具响应性,并且仅将其包含在太长而无法显示的元素上?,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/57338828/