Активируйте Popover на Hover и нажмите где угодно, чтобы закрыть - PullRequest
Новая
       62

Активируйте Popover на Hover и нажмите где угодно, чтобы закрыть

1 голос
/ 14 апреля 2020

Я использую Bootstrap 4 и хотел использовать всплывающее окно, где я могу навести курсор, чтобы активировать и закрыть его, когда вы нажимаете в любом месте.

Я также хочу, чтобы ссылка работала внутри всплывающего окна. У кого-нибудь есть идеи, как заставить его работать или что мне не хватает? 

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover',
        html : true
    });
});

$('body').on('click', function (e) {
    //only buttons
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<a href="mailto:test@test.com" data-toggle="popover" title="Popover" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">Test</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Ответы [ 2 ]

2 голосов
/ 14 апреля 2020

Для рендеринга ссылки используйте html: true и чтобы показать / скрыть всплывающее окно, вы можете использовать следующий код: 

$(document).ready(function() {
  $('[data-toggle="popover"]').popover({
    placement: 'top',
    html: true
  });

  $('[data-toggle="popover"]').on("mouseenter", function() {
    $(this).popover('show');
  });
  
  $('body').on('click', function(e) {
    $('[data-toggle=popover]').each(function() {
      if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) {
        $(this).popover('hide');
      }
    });
  });
});
html, body{ height: 100%; }
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" />


<a href="mailto:test@test.com" data-toggle="popover" title="Popover" data-content="test content <a href='#' title='test add link'>link on content</a>" data-original-title="test title">Test</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
1 голос
/ 14 апреля 2020

Пожалуйста, добавьте html: true в ваш поповер, чтобы он мог отображать HTML. 

$(document).ready(function(){
    $('[data-toggle="popover"]').popover({
        placement : 'top',
        trigger : 'hover',
        html: true
    });
});

$('body').on('click', function (e) {
    //only buttons
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
    //buttons and icons within buttons
    /*
    if ($(e.target).data('toggle') !== 'popover'
        && $(e.target).parents('[data-toggle="popover"]').length === 0
        && $(e.target).parents('.popover.in').length === 0) { 
        $('[data-toggle="popover"]').popover('hide');
    }
    */
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<a href="mailto:test@test.com" data-toggle="popover" title="Popover" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">Test</a>

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
...