Yiibooster popover 鼠标置于popover上不隐藏

最新推荐文章于 2025-03-06 13:03:32 发布

原创最新推荐文章于 2025-03-06 13:03:32 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrap #yii #popover #hover

php 专栏收录该内容

6 篇文章

订阅专栏

YiiBooster中的BootstrapPopover在鼠标移开触发按钮时会自动关闭，但在某些场景下希望保持其显示状态。本文探讨如何实现Popover在鼠标悬停其上时不会隐藏。

yiibooster bootstrap 的popover控件能够由hover触发，但是一旦想移动鼠标离开原button，进入popover时，popover控件就消失了，很多情况下我们期望它不消失。

<?php $this->widget('ext.bootstrap.widgets.TbButton', array(
                    'label' => "原button",
                    'htmlOptions' => array(
                        'data-title' => 'popover title',
                        'data-html' => true,
                        'data-width' => 600,
                        'data-placement' => 'bottom',
                        'data-content' => 'nice',
                        'data-toggle' => 'popover',
                        'data-trigger' => 'manual',
                        'onmouseenter' => '
                            var _this = this; 
                            $(this).popover("show");
                            $(this).siblings(".popover").on("mouseleave", function () {
                                $(_this).popover("hide");
                            });',
                        'onmouseleave' => '
                            var _this = this; 
                            setTimeout(function () {
                                if (!$(".popover:hover").length) {
                                    $(_this).popover("hide");
                                }
                            }, 100);
                        ',
                    ),
                ),
);?>

注意其中的data-toggle和 onmouseenter onmouseleave项