我正在尝试制作一个弹出窗口,当用户将鼠标悬停在其上方时,该弹出窗口将保留在其位置,但仅适用于太大而无法在屏幕上显示的元素。
我有以下代码,这是我要执行的操作的错误实现:

<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>


以下是有什么问题,这是我的鼠标悬停前的外观:

jquery - 如何使Bootstrap popover更具响应性,并且仅将其包含在太长而无法显示的元素上?-LMLPHP

这是悬停后的样子:

jquery - 如何使Bootstrap popover更具响应性,并且仅将其包含在太长而无法显示的元素上?-LMLPHP

当不再位于元素上时,它基本上不会删除弹出窗口(导致同时具有多个弹出窗口),并且还会为不需要它的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/

10-11 22:11
查看更多