BootStrap의 팝업 상자(Popover)는 팝업 레이어 위로 마우스 이동을 지원합니다. 팝업 창 레이어가 숨겨지지 않는 이유와 해결 방법.

팝오버는 툴팁과 유사하며 확장된 보기를 제공합니다. 팝오버를 활성화하려면 사용자가 해당 요소 위로 마우스를 가져가면 됩니다. 팝업 상자의 내용은 Bootstrap Data API를 사용하여 완전히 채울 수 있습니다. 이 방법은 도구 설명에 의존합니다.

1 지연을 설정하세요. 지연 후 팝업창이 이동하지 않으면 팝업창이 숨겨집니다.

Tooltip.prototype.init = function{中的
var triggers = this.options.trigger.split(' ')后面加上
//设置延时
if (this.options.trigger.indexOf('hover') > -1) {
$.extend(true, this.options, { delay: { hide: 100 } });
}

2 컨트롤 불가 사라지는 코드

는 Tooltip.prototype.enter = function(obj)에서

clearTimeout(self.timeout) 뒤에 추가됩니다.

if (self.options.trigger.indexOf('hover') > -1) {
self.$tip.unbind('mouseenter').bind('mouseenter', function (e) {
self.$tip.data('data-element', self.$element);//触发popover框的点击事件时可以获取id
clearTimeout(self.timeout);
self.hoverState = 'in';
}).unbind('mouseleave').bind('mouseleave', function (e) {
self.hoverState = 'out';
self.timeout = setTimeout(function () {
if (self.hoverState == 'out') self.hide()
}, self.options.delay.hide)
})
}

다음은 팝업박스(팝오버) 사용법에 대한 보충설명입니다

팝업박스(팝오버) 플러그인은 콘텐츠를 생성합니다 그리고 요구 사항에 따라 태그를 지정합니다. 기본적으로 팝오버는 트리거 요소 뒤에 배치됩니다. 두 가지 방법으로 팝오버를 추가할 수 있습니다:

데이터 속성을 통해: 팝오버를 추가하려면 앵커/버튼 태그에 data-toggle=을 추가하기만 하면 됩니다. "팝오버"만 있으면 됩니다. 앵커의 제목은 팝오버의 텍스트입니다. 기본적으로 플러그인은 팝오버를 상단에 배치합니다.

JavaScript를 통해: JavaScript를 통해 팝오버 활성화:

<a href="#" data-toggle="popover" title="Example popover">
请悬停在我的上面
</a>

팝오버 플러그인은 이전에 설명한 드롭다운 메뉴와 다릅니다. 다른 플러그인과 마찬가지로 순수한 CSS 플러그인이 아닙니다. 플러그인을 사용하려면 jquery(javascript 읽기)를 사용하여 활성화해야 합니다. 페이지의 모든 팝오버를 활성화하려면 다음 스크립트를 사용하십시오.

$('#identifier').popover(options)

위는 이 기사의 전체 내용입니다. 더 많은 관련 튜토리얼을 보려면

Bootstrap 비디오 튜토리얼을 방문하세요.

$(function () { $("[data-toggle='popover']").popover(); });

!