Bootstrap error popover - Исправление ошибок и поиск оптимальных решений проблем

I can make popovers appear using bootstrap easily enough, and I can also do validations using the standard jQuery validation plugin or the jQuery validation engine, but I can’t figure out how to feed one into the other.

I think what I need is some hook which is called by the validator when it wants to display a notification, give it a closure that passes the message and the target element to a popover. This seems like a kind of dependency injection.

All nice in theory, but I just can’t figure out where that hook is, or even if one exists in either validation engine. They both seem intent on taking responsibility for displaying notifications with all kinds of elaborate options for placement, wrappers, styles when all I’m after is the error type(s) (I don’t necessarily even need message text) and element it relates to. I’ve found hooks for the entire form, not the individual notifications.

I much prefer validation systems that use classes to define rules, as they play nicely with dynamically created forms.

Anyone have a solution or a better idea?

asked Dec 9, 2011 at 0:10

This is a hands-on example:

$('form').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass, validClass) { 
        $(element).parents("div[class='clearfix']").addClass(errorClass).removeClass(validClass); 
    }, 
    unhighlight: function (element, errorClass, validClass) { 
        $(element).parents(".error").removeClass(errorClass).addClass(validClass); 
    }
});

It doesn’t really use bootstrap popovers, but it looks really nice and is easy to achieve.

UPDATE

So, to have popover validation you can use this code:

$("form").validate({
  rules : {
    test : {
      minlength: 3 ,
      required: true
    }
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      return $(value).popover("hide");
    });
    return $.each(errorList, function(index, value) {
      var _popover;
      _popover = $(value.element).popover({
        trigger: "manual",
        placement: "top",
        content: value.message,
        template: "<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>"
      });
      // Bootstrap 3.x :      
      //_popover.data("bs.popover").options.content = value.message;
      // Bootstrap 2.x :
      _popover.data("popover").options.content = value.message;
      return $(value.element).popover("show");
    });
  }
});

You get something like this:

Check out the jsFiddle.

answered Dec 30, 2011 at 0:55

Kenny MeyerKenny Meyer

7,7296 gold badges47 silver badges66 bronze badges

Take a look at the highlight and showErrors jQuery Validator options, these will let you hook in your own custom error highlights that trigger Bootstrap popovers.

answered Dec 9, 2011 at 0:13

Chris FulstowChris Fulstow

40.7k10 gold badges86 silver badges109 bronze badges

Chris Fulstow had it right, but it still took me a while, so heres the complete code:

This shows the popover on error, and hides the default error labels:

$('#login').validate({
  highlight: function(element, errClass) {
    $(element).popover('show');
  },
  unhighlight: function(element, errClass) {
    $(element).popover('hide');
  },
  errorPlacement: function(err, element) {
    err.hide();
  }
}).form();

This sets up the popover. The only thing you need from this is trigger: ‘manual’

$('#password').popover({
  placement: 'below',
  offset: 20,
  trigger: 'manual'
});

The title and content attributes passed in to popover weren’t working, so I specified them inline in my #password input with data-content=’Minimum 5 characters’ and data-original-title=’Invalid Password’. You also need rel=’popover’ in your form.

This works, but the popover flickers upon unselecting. Any idea how to fix that?

answered Jan 5, 2012 at 6:10

Varun SinghVarun Singh

1,6263 gold badges18 silver badges25 bronze badges

Here’s a follow up to the excellent suggestion from Varun Singh which prevents the «flicker» issue of the validation constantly trying to «show» even though the popup is already present. I’ve simply added an error states array to capture which elements are showing errors and which aren’t. Works like a charm!

var errorStates = [];

$('#LoginForm').validate({
    errorClass:'error',
    validClass:'success',
    errorElement:'span',
    highlight: function (element, errorClass) {
        if($.inArray(element, errorStates) == -1){
            errorStates[errorStates.length] = element;
            $(element).popover('show');
        }
    }, 
    unhighlight: function (element, errorClass, validClass) {
        if($.inArray(element, errorStates) != -1){
            this.errorStates = $.grep(errorStates, function(value) {
              return value != errorStates;
            });
            $(element).popover('hide');
        }
    },
    errorPlacement: function(err, element) {
        err.hide();
    }
});

$('#Login_unique_identifier').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

$('#Login_password').popover({
    placement: 'right',
    offset: 20,
    trigger: 'manual'
});

answered Dec 22, 2012 at 23:26

I prefer to change the CSS of bootstrap. Just added the classes of jQuery validate in the right place. field-validation-error and input-validation-error

    form .clearfix.error > label, form .clearfix.error .help-block, form .clearfix.error .help-inline, .field-validation-error {
  color: #b94a48;
}
form .clearfix.error input, form .clearfix.error textarea, .input-validation-error {
  color: #b94a48;
  border-color: #ee5f5b;
}
form .clearfix.error input:focus, form .clearfix.error textarea:focus, .input-validation-error:focus {
  border-color: #e9322d;
  -webkit-box-shadow: 0 0 6px #f8b9b7;
  -moz-box-shadow: 0 0 6px #f8b9b7;
  box-shadow: 0 0 6px #f8b9b7;
}

answered Jan 4, 2012 at 12:43

This is how I did it with Bootstrap 2.x and jQuery Validate 1.9

$('#form-register').validate({ errorElement: 'span', errorClass:'help-inline', highlight:    function (element, errorClass) {
        $(element).parent().parent().addClass('error');
    }, unhighlight: function (element, errorClass) {
        $(element).parent().parent().removeClass('error');
    }});

answered Apr 4, 2012 at 18:44

Please take a look at the following:
— https://gist.github.com/3030983
I think it’s the simplest of all.

EDIT

Code from link:

$('form').validate({
    rules: {
        numero: {
            required: true
        },
        descricao: {
            minlength: 3,
            email: true,
            required: true
        }
    },

    showErrors: function (errorMap, errorList) {

        $.each(this.successList, function (index, value) {
            $(value).popover('hide');
        });


        $.each(errorList, function (index, value) {

            console.log(value.message);

            var _popover = $(value.element).popover({
                trigger: 'manual',
                placement: 'top',
                content: value.message,
                template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            _popover.data('popover').options.content = value.message;

            $(value.element).popover('show');

        });

    }

});

Anne

26.7k9 gold badges63 silver badges70 bronze badges

answered Sep 22, 2012 at 21:21

CodematorCodemator

5131 gold badge10 silver badges19 bronze badges

Many thanks for the heads up! Here is my version for Bootstrap but with Tooltips. In my opinion it’s more elegant than popovers. I know the question was for popovers so please do not vote down for this reason. Maybe somebody will like it this way. I love when I’m searching for something and I found new ideas on Stackoverflow. Note: no markup on form is necessary.

    $('#LoginForm').validate({
        rules: {
            password: {
                required: true,
                minlength: 6
            },

            email_address: {
                required: true,
                email: true
            }
        },
        messages: {
            password: {
                required: "Password is required",
                minlength: "Minimum length is 6 characters"
            },
            email_address: {
                required: "Email address is required",
                email: "Email address is not valid"
            }
        },  
        submitHandler: function(form) {
            form.submit();
        },

        showErrors: function (errorMap, errorList) {

            $.each(this.successList, function (index, value) {
                $('#'+value.id+'').tooltip('destroy');
            });


            $.each(errorList, function (index, value) {

                $('#'+value.element.id+'').attr('title',value.message).tooltip({
                    placement: 'bottom',
                    trigger: 'manual',
                    delay: { show: 500, hide: 5000 }
                }).tooltip('show');

            });

        }

    });

answered Feb 27, 2013 at 3:03

Adrian P.Adrian P.

4,9581 gold badge44 silver badges47 bronze badges

This is how I made it happen. But it involves making 2 changes to the validate script (I got the code for bootstrap 1.4 here and then modified it — http://mihirchitnis.net/2012/01/customizing-error-messages-using-jquery-validate-plugin-for-twitter-bootstrap/)

My call to validate:

    $("#loginForm").validate({
  errorClass: "control-group error",
  validClass: "control-group success",
  errorElement: "span", // class='help-inline'
  highlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    } else {
        $(element).parent("div").parent("div").removeClass(validClass).addClass(errorClass);
    }
  },
  unhighlight: function(element, errorClass, validClass) {
    if (element.type === 'radio') {
        this.findByName(element.name).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    } else {
        $(element).parent("div").parent("div").removeClass(errorClass).addClass(validClass);
    }
  }
});

Then you need to change 2 things in jquery.validate.js
1. apply this fix — https://github.com/bsrykt/jquery-validation/commit/6c3f53ee00d8862bd4ee89bb627de5a53a7ed20a
2. After line 647 (in the showLabel function, create label part) after line .addClass(this.settings.errorClass) add line: .addClass("help-inline")
Someone can maybe find a way to apply the second fix in the validate function, but I havent found a way, since showLabel is called after highlight.

answered Feb 7, 2012 at 14:32

This is what I put in my validate to conform to the Twitter Bootstrap guidelines. The error validation message is put in a <span class=help-inline> and we want to highlight the outer container as an error or success:

errorClass:'help-inline',
errorElement:'span',
highlight: function (element, errorClass, validClass) {
$(element).parents("div.clearfix").addClass('error').removeClass('success');
},
unhighlight: function (element, errorClass, validClass) {
$(element).parents(".error").removeClass('error').addClass('success');
}

answered Mar 15, 2012 at 11:06

naminnamin

36.6k8 gold badges58 silver badges74 bronze badges

Here is an update to Kenny Meyer’s excellent answer above. There were a couple of issues that prevented it from working for me, which I have addressed in this snippet:

showErrors: function (errorMap, errorList) {
        $.each(this.successList, function (index, element) {
            return $(element).popover("destroy");
        });

        $.each(errorList, function (index, error) {
            var ele = $(error.element); //Instead of referencing the popover directly, I use the element that is the target for the popover

            ele.popover({
                    trigger: "manual",
                    placement: "top",
                    content: function(){ //use a function to assign the error message to content
                        return error.message
                    },
                    template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>'
            });

            //bs.popover must be used, not just popover
            ele.data("bs.popover").options.content = error.message;

            return $(error.element).popover("show");
        });
    }

answered Aug 1, 2016 at 19:36

tofiriustofirius

1732 silver badges7 bronze badges

Not sure if this is relevant to the discussion because the original poster asked for hooks to show/hide bootstrap popovers.

I was looking for simple validation and popovers didn’t matter. A related post and the first in google search results has already been marked duplicate of this question. So it made sense to mention this excellent @ReactiveRaven’s jqValidation JS, aptly called jqBootstrapValidation, that weds well with Twitter Bootstrap. Setup takes a few minutes only. Download here.

Hope this adds value.

answered Feb 27, 2013 at 3:55

uchampuchamp

2,4921 gold badge19 silver badges31 bronze badges

tl;dr avoid needing to enumerate explicit popovers by using a hash map to store the ids of the elements, and creating popovers on-the-fly (mashup Jeffrey Gilbert and Kenny Meyer’s approaches).

Here’s my take, which fixes the flickering problem mentioned by others, but unlike @Jeffrey Gilbert’s answer, does not use a list (errorStates) but rather uses an error map. Hash maps FTW. I think I remember reading somewhere that every problem in CS can be solved with a hash map

var err_map = new Object();     // <--- n.b.
$("form#set_draws").validate({
  rules: {
    myinput: { required: true, number: true },
  },
  showErrors: function(errorMap, errorList) {
    $.each(this.successList, function(index, value) {
      if (value.id in err_map)
      {
        var k = err_map[value.id];
        delete err_map[value.id]; // so validation can transition between valid/invalid states
        k.popover("hide");
      }
    });
    return $.each(errorList, function(index, value) {
      var element = $(value.element);
      if( ! (value.element.id in err_map) ) {
        var _popover = element.popover({
          trigger: "manual",
                 placement: "top",
                 content: value.message,
                 template: "<div class="popover"><div class="arrow"></div><div class="popover-inner"><div class="popover-content"><p></p></div></div></div>"
        });
        _popover.data("popover").options.content = value.message;
          err_map[value.element.id] = _popover;
        return err_map[value.element.id].popover("show");
      }
    });
  }
});

Thanks to all others who posted ideas on this.

answered Jun 12, 2013 at 3:54

If using the above Kenny Meyer code for popups, beware that rules that check a field’s content but isn’t required such as a valid URL will cause the popup to not disappear upon clearing the field. See below onkeyup for solution. If anyone has a better solution, please post.

onkeyup: function(element, event) {
            if($(element).valid())  {
                return $(element).popover("hide");
            }
        }

answered Jul 14, 2013 at 16:41

Источник

Обзор

Вот что надо знать для эффективного использования плагина всплывающих элементов подсказки (поповеров):

Поповеры полагаются на стороннюю библиотеку Popper для позиционирования. Вы должны включить popper.min.js перед bootstrap.js или использовать один bootstrap.bundle.min.js, который содержит Popper.
Для всплывающих окон требуется плагин popover в качестве зависимости.
Всплывающие окна добавляются из соображений производительности, поэтому вы должны инициализировать их самостоятельно.
Значения нулевой длины title и content никогда не будут показывать всплывающее окно.
Укажите container: 'body', чтобы избежать проблем с рендерингом в более сложных компонентах (таких как наши группы ввода, группы кнопок и т. д.).
Запуск всплывающих окон на скрытых элементах не будет работать.
Всплывающие окна для элементов .disabled или disabled должны запускаться для элемента-оболочки.
При запуске от якорей, которые охватывают несколько строк, всплывающие окна будут центрированы между общей шириной якорей. Используйте .text-nowrap для <a>, чтобы избежать такого поведения.
Всплывающие окна должны быть скрыты до того, как соответствующие им элементы будут удалены из DOM.
Всплывающие окна могут быть вызваны благодаря элементу внутри теневого DOM.

По умолчанию этот компонент использует встроенное средство очистки содержимого, которое удаляет все элементы HTML, которые не разрешены явно. Дополнительные сведения смотрите в разделе очистки в нашей документации по JavaScript.

Ниже несколько примеров.

Примеры

Включить всплывающие окна

Как упоминалось выше, вы должны инициализировать всплывающие окна, прежде чем их можно будет использовать. Один из способов инициализировать все всплывающие окна на странице — выбрать их по их атрибуту data-bs-toggle, например:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Живая демонстрация

Мы используем JavaScript, аналогичный приведенному выше фрагменту кода, для отображения следующего живого всплывающего окна. Заголовки устанавливаются с помощью data-bs-title, а содержимое тела устанавливается с помощью data-bs-content.

Не стесняйтесь использовать title или data-bs-title в своем HTML. Когда используется title, Popper автоматически заменяет его на data-bs-title при отображении элемента.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Заголовок всплывающего окна" data-bs-content="А вот и потрясающий контент. Это очень увлекательно. Верно?">Нажмите, чтобы переключить всплывающее окно</button>

Четыре направления

Доступны четыре варианта: верхний, правый, нижний и левый. Направления отражаются при использовании Bootstrap в RTL. Установите data-bs-placement, чтобы изменить направление.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Всплывающее окно вверх">
  Всплывающее окно наверх
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Всплывающее окно справа">
  Всплывающее окно направо
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Всплывающее окно внизу">
  Всплывающее окно вниз
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Всплывающее окно слева">
  Всплывающее окно налево
</button>

Пользовательский `container`

Если у вас есть некоторые стили в родительском элементе, которые мешают всплывающему меню, вам нужно указать пользовательский container, чтобы HTML-код всплывающего окна вместо этого отображался внутри этого элемента. Это часто встречается в адаптивных таблицах, группах ввода и т.п.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Пользовательские всплывающие окна

Добавлено в версии 5.2.0

Вы можете настроить внешний вид всплывающих окон, используя CSS-переменные. Мы устанавливаем пользовательский класс с data-bs-custom-class="custom-popover", чтобы ограничить наш пользовательский внешний вид и использовать его для переопределения некоторых локальных переменных CSS.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        title="Пользовательское всплывающее окно"
        data-bs-content="Это всплывающее окно оформлено с помощью переменных CSS.">
  Пользовательское всплывающее окно
</button>

Закрыть при следующем клике

Используйте триггер focus, чтобы закрыть всплывающие окна при следующем щелчке пользователя по элементу, отличному от переключаемого элемента.

Обязательная специальная разметка для dismiss-on-next-click

Для правильного кроссбраузерного и кроссплатформенного поведения вы должны использовать тег <a>, не тег <button>, а также вы должны включить tabindex.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Отклоняемое всплывающее окно" data-bs-content="А вот и потрясающий контент. Это очень увлекательно. Верно?">Отклоняемое всплывающее окно</a>

const popover = new bootstrap.Popover('.popover-dismiss', {
  trigger: 'focus'
})

Отключенные элементы

Элементы с атрибутом disabled не являются интерактивными, то есть пользователи не могут навести на них курсор или щелкнуть их, чтобы вызвать всплывающее окно (или всплывающую подсказку). В качестве обходного пути вы захотите вызвать всплывающее окно из обертки <div> или <span>, в идеале сделать фокус на клавиатуре с помощью tabindex="0".

Для отключенных триггеров всплывающих окон вы также можете предпочесть data-bs-trigger="hover focus", чтобы всплывающее окно отображалось как немедленная визуальная обратная связь для ваших пользователей, поскольку они могут не ожидать клика по отключенному элементу.

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Отключено всплывающее окно">
  <button class="btn btn-primary" type="button" disabled>Кнопка отключена</button>
</span>

CSS

Переменные

Добавлено в версии 5.2.0

Как часть развивающегося подхода Bootstrap к переменным CSS, всплывающие окна теперь используют локальные переменные CSS в .popover для расширенной настройки в реальном времени. Значения переменных CSS задаются через Sass, поэтому настройка Sass по-прежнему поддерживается.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);

Переменные Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              var(--#{$prefix}heading-color);
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

Использование

Включить всплывающие окна через JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Настройка всплывающих окон для пользователей клавиатуры и вспомогательных технологий

Чтобы позволить пользователям клавиатуры активировать ваши всплывающие окна, вы должны добавлять их только к элементам HTML, которые традиционно являются интерактивными и ориентированными на клавиатуру (такими как ссылки или элементы управления формы). Хотя произвольные элементы HTML (такие как <span>) можно сделать фокусируемыми, добавив атрибут tabindex="0", это добавит потенциально раздражающие и запутанные позиции табуляции на неинтерактивных элементах для пользователей клавиатуры, и большинство вспомогательные технологии в настоящее время не объявляют содержимое всплывающего окна в этой ситуации. Кроме того, не полагайтесь исключительно на hover в качестве триггера для ваших всплывающих окон, так как это сделает их невозможными для пользователей клавиатуры.

Хотя вы можете вставлять богатый структурированный HTML-код во всплывающие окна с помощью параметра html, мы настоятельно рекомендуем вам избегать добавления чрезмерного количества контента. В настоящее время всплывающие окна работают следующим образом: после отображения их содержимое привязывается к элементу триггера с атрибутом aria-describedby. В результате весь контент всплывающего окна будет объявлен пользователям вспомогательных технологий одним длинным непрерывным потоком.

Кроме того, несмотря на то, что в всплывающее окно можно также включать интерактивные элементы управления (такие как элементы формы или ссылки) (путем добавления этих элементов в allowList разрешенных атрибутов и тегов), имейте в виду, что в настоящее время всплывающее окно не управляет фокусом клавиатуры. порядок. Когда пользователь с клавиатурой открывает всплывающее окно, фокус остается на вызывающем его элементе, а поскольку всплывающее окно обычно не следует сразу за триггером в структуре документа, нет гарантии, что перемещение вперед/нажатие TAB приведет к перемещению. пользователя клавиатуры в самом всплывающем окне. Короче говоря, простое добавление интерактивных элементов управления во всплывающее окно, вероятно, сделает эти элементы управления недоступными/непригодными для пользователей клавиатуры и пользователей вспомогательных технологий или, по крайней мере, приведет к нелогичному общему порядку фокуса. В этих случаях рассмотрите возможность использования вместо этого модального диалогового окна.

Опции

Поскольку параметры можно передавать через атрибуты данных или JavaScript, вы можете добавить имя параметра к data-bs-, как в data-bs-animation="{value}". Обязательно измените тип регистра имени параметра с “camelCase” на “kebab-case” при передаче параметров через атрибуты данных. Например, используйте data-bs-custom-class="beautifier" вместо data-bs-customClass="beautifier".

Начиная с Bootstrap 5.2.0, все компоненты поддерживают экспериментальный зарезервированный атрибут данных data-bs-config, который может содержать простую конфигурацию компонента в виде строки JSON. Когда элемент имеет атрибуты data-bs-config='{"delay":0, "title":123}' и data-bs-title="456", окончательное значение title будет 456, а отдельные атрибуты данных переопределяют значения, указанные в data-bs-config. Кроме того, существующие атрибуты данных могут содержать значения JSON, такие как data-bs-delay='{"show":0,"hide":150}'.

Обратите внимание, что по соображениям безопасности параметры sanitize, sanitizeFn и allowList не могут быть предоставлены с использованием атрибутов данных.

Название	Тип	По умолчанию	Описание
`allowList`	object	Значение по умолчанию	Объект, который содержит разрешенные атрибуты и теги.
`animation`	boolean	`true`	Применить CSS-переход затухания к поповеру
`boundary`	string, element	`'clippingParents'`	Граница ограничения переполнения поповера (применяется только к Popper модификатору preventOverflow). По умолчанию это `'clippingParents'`, и он может принимать ссылку HTMLElement (только через JavaScript). Для получения дополнительной информации обратитесь к документации обнаружения переполнения Popper.
`container`	string, element, false	`false`	Добавляет всплывающее окно к определенному элементу. Пример: `container: 'body'`. Этот параметр особенно удобен тем, что позволяет расположить всплывающее окно в потоке документа рядом с инициирующим элементом, что предотвратит перемещение всплывающего окна от инициирующего элемента во время изменения размера окна.
`content`	string, element, function	`''`	Значение содержимого по умолчанию, если атрибут `data-bs-content` отсутствует. Если задана функция, она будет вызываться со ссылкой `this`, установленной на элемент, к которому прикреплено всплывающее окно.
`customClass`	string, function	`''`	Добавляйте классы во всплывающее окно, когда оно отображается. Обратите внимание, что эти классы будут добавлены в дополнение к любым классам, указанным в шаблоне. Чтобы добавить несколько классов, разделите их пробелами: `'class-1 class-2'`. Вы также можете передать функцию, которая должна возвращать одну строку, содержащую дополнительные имена классов.
`delay`	number, object	`0`	Задержка отображения и скрытия всплывающего окна (мс) — не относится к ручному типу триггера. Если указано число, задержка применяется как для скрытия, так и для показа. Структура объекта: `delay: { "show": 500, "hide": 100 }`.
`fallbackPlacements`	string, array	`['top', 'right', 'bottom', 'left']`	Определите резервные места размещения, предоставив список мест размещения в виде массива (в порядке предпочтения). Для получения дополнительной информации обратитесь к документации о поведении Popper.
`html`	boolean	`false`	Разрешить HTML во всплывающем окне. Если `true`, теги HTML в `title` всплывающего окна будут отображаться во всплывающем окне. Если `false`, свойство `innerText` будет использоваться для вставки содержимого в DOM. Используйте текст, если вы беспокоитесь о XSS-атаках.
`offset`	number, string, function	`[0, 0]`	Смещение всплывающего окна относительно его цели. Вы можете передать строку в атрибутах данных со значениями, разделенными запятыми, например: `data-bs-offset="10,20"`. Когда функция используется для определения смещения, она вызывается с объектом, содержащим размещение поппера, ссылку и прямоугольники поппера в качестве первого аргумента. Узел триггерного элемента DOM передается в качестве второго аргумента. Функция должна вернуть массив с двумя числами: skidding, distance. Для получения дополнительной информации обратитесь к документации смещения Popper.
`placement`	string, function	`'top'`	Как расположить поповер: авто, сверху, снизу, слева, справа. Когда указано `auto`, всплывающее окно будет динамически переориентироваться. Когда функция используется для определения размещения, она вызывается с узлом DOM всплывающего окна в качестве первого аргумента и узлом DOM триггерного элемента в качестве второго. Контекст `this` установлен на экземпляр всплывающего окна.
`popperConfig`	null, object, function	`null`	Чтобы изменить конфигурацию Popper по умолчанию в Bootstrap, смотрите Конфигурация Popper. Когда функция используется для создания конфигурации Popper, она вызывается с объектом, который содержит конфигурацию Bootstrap по умолчанию Popper. Это поможет вам использовать и объединить настройки по умолчанию с вашей собственной конфигурацией. Функция должна возвращать объект конфигурации для Popper.
`sanitize`	boolean	`true`	Включите или отключите очистку. Если активированы параметры `'template'`, `'content'` и `'title'`, они будут очищены.
`sanitizeFn`	null, function	`null`	Здесь вы можете указать свою собственную функцию sanitize. Это может быть полезно, если вы предпочитаете использовать выделенную библиотеку для выполнения санитарной обработки.
`selector`	string, false	`false`	Если предоставлен селектор, объекты всплывающих окон будут делегированы указанным целям. На практике это также используется для применения всплывающих окон к динамически добавляемым элементам DOM (поддержка `jQuery.on`). Смотрите эту проблему и информативный пример.
`template`	string	`'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'`	Базовый HTML для использования при создании всплывающего окна. `title` всплывающего окна будет внедрен в `.popover-inner`. `.popover-arrow` станет стрелкой всплывающего окна. Самый внешний элемент-оболочка должен иметь класс `.popover` и `role="popover"`.
`title`	string, element, function	`''`	Значение заголовка по умолчанию, если атрибут `title` отсутствует. Если задана функция, она будет вызываться со ссылкой `this`, установленной на элемент, к которому прикреплено всплывающее окно.
`trigger`	string	`'hover focus'`	Как срабатывает всплывающее окно: клик, наведение, фокус, вручную. Вы можете передать несколько триггеров; разделяйте их пробелом. `'manual'` указывает, что всплывающее окно будет вызываться программно с помощью методов `.popover('show')`, `.popover('hide')` и `.popover('toggle')`; это значение нельзя комбинировать ни с каким другим триггером. `'hover'` сам по себе приведет к всплывающим окнам, которые нельзя вызвать с помощью клавиатуры, и их следует использовать только в том случае, если существуют альтернативные методы передачи той же информации для пользователей клавиатуры.

Атрибуты данных для отдельных всплывающих окон

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

Использование функции с `popperConfig`

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Методы

Метод	Описание
`disable`	Удаляет возможность отображения всплывающего окна элемента. Всплывающее окно будет отображаться только в том случае, если оно будет повторно включено.
`dispose`	Скрывает и уничтожает всплывающее окно элемента (удаляет сохраненные данные в элементе DOM). Всплывающие окна, использующие делегирование (которые создаются с помощью опции `selector`) не могут быть уничтожены по отдельности в элементах-триггерах-потомках.
`enable`	Позволяет отображать всплывающее окно элемента. Поповеры включены по умолчанию.
`getInstance`	Статический метод, который позволяет вам получить экземпляр всплывающего окна, связанный с элементом DOM.
`getOrCreateInstance`	Статический метод, который позволяет вам получить экземпляр всплывающего окна, связанный с элементом DOMили создать новый, если он не был инициализирован.
`hide`	Скрывает всплывающее окно элемента. Возвращается к вызывающей стороне до того, как всплывающее окно будет фактически скрыто (т.е. до того, как произойдет событие `hidden.bs.popover`). Это считается “ручным” запуском всплывающего окна.
`setContent`	Дает возможность изменить содержимое всплывающего окна после его инициализации.
`show`	Отображает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно действительно будет показано (т.е. до того, как произойдет событие `shown.bs.popover`). Это считается “ручным” запуском всплывающего окна. Всплывающие окна, заголовок и содержимое которых имеют нулевую длину, никогда не отображаются.
`toggle`	Переключает всплывающее окно элемента. Возврат к вызывающей стороне до того, как всплывающее окно будет действительно показано или скрыто (т.е. до того, как произойдет событие `shown.bs.popover` или `hidden.bs.popover`). Это считается “ручным” запуском всплывающего окна.
`toggleEnabled`	Переключает возможность отображения или скрытия всплывающего окна элемента.
`update`	Обновляет позицию всплывающего окна элемента.

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Возвращает экземпляр всплывающего окна Bootstrap

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

Метод setContent принимает аргумент object, где каждый ключ свойства является допустимым селектором string в шаблоне всплывающего окна, а каждое связанное значение свойства может быть string | element | function | null.

События

Событие	Описание
`hide.bs.popover`	Это событие запускается сразу после вызова метода экземпляра `hide`.
`hidden.bs.popover`	Это событие запускается, когда всплывающее окно перестает быть скрытым от пользователя (будет ждать завершения переходов CSS).
`inserted.bs.popover`	Это событие запускается после события `show.bs.popover`, когда шаблон всплывающего окна был добавлен в DOM.
`show.bs.popover`	Это событие срабатывает сразу же, когда вызывается метод экземпляра `show`.
`shown.bs.popover`	Это событие запускается, когда всплывающее окно становится видимым для пользователя (будет ждать завершения переходов CSS).

const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // сделайте что-нибудь...
})

Источник

jquery.validate.bootstrap.popover

Show error message via bootstrap popover for jquery validate.

Instead of calling $(‘#form_id’).validate(), call this:

$(function() {
	$('#form_id').validate_popover();
});

Check live demo here and here.

Dependency

jquery
jquery.validate
bootstrap 3

Options

The plugin accepts options as a single object argument. Pass in the options like this:

$('#form_id').validate_popover({ popoverPosition: 'top' });

Supported options are:

popoverPosition Supported values: ‘right’, ‘top’; default to ‘right’
popoverContainer The container popover message will append to, default: ‘body’
hideForInvisible The flag to control if popover should be hidden for invisible validated element, default: true

beforeShowError A function will be called before the error popover shows, this of the function is the input html element validated:

  $('#form_id').validate_popover({ beforeShowError: function(message) { 
      alert(this.name + ": " + message); 
    }
  });

get_offset_element A function will be called when positioning error popover relative to the returned element, default implmentation is returnning the validated element. e.g. Issue 6:

  $('#form_id').validate_popover({ get_offset_element: function(element) {
      if ($(element).attr("id") == "test") {
          return $(element).siblings('.bootstrap-select');
      } else {
          return $(element);
      }
    }
  });

HTML data attribute options

data-popover-position Supported values: ‘right’, ‘top’, this will override the global setting passed to validate_popover calling.
```
  data-popover-position = "top"
```
data-popover-offset Adjust the offset of the popover message, format is «top,left», like the following example will decrease the top by 10, and increase the left by 100:
```
  data-popover-offset = "-10,100"
```
data-popover-hide-for-invisible Set to false to allow error popover is displayed even for invisible validated element:
```
  data-popover-hide-for-invisible="false"
```

Public Methods

Public methods could be called:

$.validator.reposition(); // re-position all popovers

Public methods list:

hide_validate_popover Hide the popover for a validated element:
```
  $.validator.hide_validate_popover($("#client_email"));
```

show_error Display error message programatically for an element:

  $.validator.show_error("You need to choose a template from the list.", $("#template"));

reposition Re-position all popovers when no argument is given; otherwise, only re-position popovers for given validated elements. Useful to put into window resize handler. e.g.
```
  $.validator.reposition($("#client_email, #client_password"));
```

License

jquery.validate.bootstrap.popover is licensed under the MIT license.

Источник

Popovers

— API

Usage

Via data attributes

Via JavaScript:

Making popovers work for keyboard and assistive technology users

To allow keyboard users to activate your popovers, you should only add them to HTML elements
that are traditionally keyboard-focusable and interactive (such as links or form controls).
Although arbitrary HTML elements (such as
<span>s) can be made focusable by adding the
tabindex="0" attribute, this will add potentially annoying and confusing tab
stops on non-interactive elements for keyboard users, and most assistive technologies
currently do not announce the popover’s content in this situation. Additionally, do not rely
solely on hover as the trigger for your popovers, as this will make them
impossible to trigger for keyboard users.

While you can insert rich, structured HTML in popovers with the
html option, we strongly recommend that you avoid adding an excessive amount of
content. The way popovers currently work is that, once displayed, their content is tied to the
trigger element with the aria-describedby attribute. As a result, the entirety of
the popover’s content will be announced to assistive technology users as one long,
uninterrupted stream.

Additionally, while it is possible to also include interactive controls (such as form elements
or links) in your popover (by adding these elements to the
allowList or allowed attributes and tags), be aware that currently the popover
does not manage keyboard focus order. When a keyboard user opens a popover, focus remains on
the triggering element, and as the popover usually does not immediately follow the trigger in
the document’s structure, there is no guarantee that moving forward/pressing
TAB will move a keyboard user into the popover itself. In short, simply adding
interactive controls to a popover is likely to make these controls unreachable/unusable for
keyboard users and users of assistive technologies, or at the very least make for an illogical
overall focus order. In these cases, consider using a modal dialog instead.

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the
option name to data-mdb-, as in data-mdb-animation="".

Note: For security reasons the sanitize,
sanitizeFn and allowList options cannot be supplied using data
attributes.

Name	Type	Default	Description
`animation`	boolean	`true`	Apply a CSS fade transition to the popover
`container`	string \| element \| false	`false`	Appends the popover to a specific element. Example: `container: 'body'`. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element — which will prevent the popover from floating away from the triggering element during a window resize.
`content`	string \| element \| function	`''`	Default content value if `data-mdb-content` attribute isn’t present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to.
`customClass`	string \| function	`''`	Add classes to the tooltip when it is shown. Note that these classes will be added in addition to any classes specified in the template. To add multiple classes, separate them with spaces: `'class-1 class-2'`. You can also pass a function that should return a single string containing additional class names.
`delay`	number \| object	`0`	Delay showing and hiding the popover (ms) — does not apply to manual trigger type If a number is supplied, delay is applied to both hide/show Object structure is: `delay: { "show": 500, "hide": 100 }`
`html`	boolean	`false`	Insert HTML into the popover. If false, `innerText` property will be used to insert content into the DOM. Use text if you’re worried about XSS attacks.
`placement`	string \| function	`'right'`	How to position the popover — auto \| top \| bottom \| left \| right. When `auto` is specified, it will dynamically reorient the popover. When a function is used to determine the placement, it is called with the popover DOM node as its first argument and the triggering element DOM node as its second. The `this` context is set to the popover instance.
`selector`	string \| false	`false`	If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to enable dynamic HTML content to have popovers added. See this and an informative example.
`template`	string	`'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'`	Base HTML to use when creating the popover. The popover’s `title` will be injected into the `.popover-header`. The popover’s `content` will be injected into the `.popover-body`. `.popover-arrow` will become the popover’s arrow. The outermost wrapper element should have the `.popover` class.
`title`	string \| element \| function	`''`	Default title value if `title` attribute isn’t present. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to.
`trigger`	string	‘click’	How popover is triggered — click \| hover \| focus \| manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.
`offset`	number \| string	0	Offset of the popover relative to its target. For more information refer to Popper’s offset docs.
`fallbackPlacement`	string \| array	‘flip’	Allow to specify which position Popper will use on fallback. For more information refer to Popper’s behavior docs
`boundary`	string \| element	‘clippingParents’	Overflow constraint boundary of the popover (applies only to Popper’s preventOverflow modifier). Accepts the values of `'viewport'`, `'window'`, `'scrollParent'`, or an HTMLElement reference (via JavaScript only). For more information refer to Popper’s detectOverflow docs.
`sanitize`	boolean	true	Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized.
`allowList`	object	`Default value`	Object which contains allowed attributes and tags
`sanitizeFn`	null \| function	`null`	Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization.
`popperConfig`	null \| object	`null`	To change Bootstrap’s default Popper config, see Popper’s configuration

Data attributes for individual popovers:

Options for individual popovers can alternatively be specified through the use of data
attributes, as explained above.

Methods

Asynchronous methods and transitions:

All API methods are asynchronous and start a transition.
They return to the caller as soon as the transition is started but
before it ends. In addition, a method call on a
transitioning component will be ignored.

Method	Description	Example
`show`	Reveals an element’s popover. Returns to the caller before the popover has actually been shown (i.e. before the `shown.mdb.popover` event occurs). This is considered a “manual” triggering of the popover. Popovers whose title and content are both zero-length are never displayed.	`myPopover.show()`
`hide`	Hides an element’s popover. Returns to the caller before the popover has actually been hidden (i.e. before the `hidden.mdb.popover` event occurs). This is considered a “manual” triggering of the popover.	`myPopover.hide()`
`toggle`	Toggles an element’s popover. Returns to the caller before the popover has actually been shown or hidden (i.e. before the `shown.mdb.popover` or `hidden.mdb.popover` event occurs). This is considered a “manual” triggering of the popover.	`myPopover.toggle()`
`dispose`	Hides and destroys an element’s popover. Popovers that use delegation (which are created using the `selector` option) cannot be individually destroyed on descendant trigger elements.	`myPopover.dispose()`
`enable`	Gives an element’s popover the ability to be shown. Popovers are enabled by default.	`myPopover.enable()`
`disable`	Removes the ability for an element’s popover to be shown. The popover will only be able to be shown if it is re-enabled.	`myPopover.disable()`
`toggleEnabled`	Toggles the ability for an element’s popover to be shown or hidden.	`myPopover.toggleEnabled()`
`update`	Updates the position of an element’s popover.	`myPopover.update({delay: { "show": 500, "hide": 100 }})`
`getInstance`	Static method which allows you to get the popover instance associated with a DOM element.	`Popover.getInstance()`
`getOrCreateInstance`	Static method which allows you to get the popover instance associated with a DOM element or create a new one in case it wasn’t initialized.	`Popover.getOrCreateInstance()`

Events

Event type	Description
`show.mdb.popover`	This event fires immediately when the `show` instance method is called.
`shown.mdb.popover`	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).
`hide.mdb.popover`	This event is fired immediately when the `hide` instance method has been called.
`hidden.mdb.popover`	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).
`inserted.mdb.popover`	This event is fired after the `show.mdb.popover` event when the popover template has been added to the DOM.

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component:

CSS variables

As part of MDB’s evolving CSS variables approach, popover now use local CSS variables on .popover for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

SCSS variables

Источник

Всплывающее окно

Функцию всплывающего сообщения, которая обеспечивает поведение, подобное всплывающей подсказке, можно легко применить к любому интерактивному элементу с помощью компонента <b-popover> или директивы v-b-popover.

<div class="text-center my-3">
  <b-button v-b-popover.hover.top="'Я содержание директивы popover!'" title="Заголовок всплывающего окна">
    Наведите на меня
  </b-button>

  <b-button id="popover-target-1">
    Наведите на меня
  </b-button>
  <b-popover target="popover-target-1" triggers="hover" placement="top">
    <template #title>Заголовок всплывающего окна</template>
    Я <b>компонентный</b> поповер контент!
  </b-popover>
</div>

Обзор

Что нужно знать при использовании компонента popover:

Поповеры полагаются на стороннюю библиотеку Popper.js для позиционирования.
Поповеры требуют пользовательского SCSS/CSS BootstrapVue для правильной работы и для вариантов.
Укажите container как null (по умолчанию, добавляется к <body>), чтобы избежать проблем с рендерингом в более сложных компонентах (таких как группы ввода, группы кнопок и т. д.). Вы можете использовать container, чтобы дополнительно указать другой элемент, к которому нужно добавить отображаемое всплывающее окно.
Запуск всплывающих окон на скрытых элементах не будет работать.
Поповеры для disabled элементов должны запускаться для элемента-оболочки.
При запуске из гиперссылок, которые охватывают несколько строк, всплывающие окна будут центрированы. Используйте white-space: nowrap; для <a>, <b-link> и <router-link>, чтобы избежать такого поведения.

Цель

Целью является элемент триггер (или компонент), который вызовет всплывающее окно. Цель указывается с помощью свойства target и может быть любой из следующих:

Строка, идентифицирующая идентификатор триггерного элемента (или идентификатор корневого элемента компонента)
Ссылка (ref) на HTMLElement или SVGElement (например, через this.$refs.refName)
Ссылка (ref) на компонент, который имеет либо HTMLElement, либо SVGElement в качестве корневого элемента (например, через this.$refs.refName)
Функция (callback), которая возвращает ссылку на HTMLElement или SVGElement

Для получения дополнительной информации о ссылках см. официальную документацию Vue.

Примечания:

Целевой элемент должен существовать в документе, прежде чем <b-popover> будет смонтирован. Если целевой элемент не найден во время монтирования, всплывающее окно никогда не откроется. Всегда размещайте компонент <b-popover> ниже в DOM, чем целевой элемент. Это правило также применяется, если функция обратного вызова используется в качестве целевого элемента, поскольку этот обратный вызов вызывается только один раз при монтировании.

HTMLElement относится к стандартным элементам HTML, таким как <div>, <button> и т. д., а SVGElement относится к <svg> или поддерживаемым дочерним элементам SVG.

Позиционирование

Для позиционирования доступны двенадцать вариантов выравнивания: top, topleft, topright, right, righttop, rightbottom, bottom, bottomleft, bottomright, left, lefttop и leftbottom. Позиционирование относительно триггерного элемента.

Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Смотрите документацию Директива Popover для живых примеров позиционирования.

Триггеры

570 / 5 000 Результаты перевода Всплывающие окна могут быть запущены (открыты/закрыты) с помощью любой комбинации click, hover и focus. Триггер по умолчанию — click. Или можно указать триггер manual, где всплывающее окно можно открыть или закрыть только программно.

Если всплывающее окно имеет более одного триггера, то все триггеры должны быть очищены, прежде чем всплывающее окно закроется. Т. е. если всплывающее окно имеет триггер focus click и оно было открыто focus, а затем пользователь щелкает элемент триггера, он должен снова щелкнуть его и переместить фокус, чтобы закрыть всплывающее окно.

Предостережения с триггером `focus` на элементах `<button>`

Для правильного кросс-браузерного и кросс-платформенного поведения при использовании только триггера focus вы должны использовать элемент, который отображает тег <a>, а не тег <button>, и вы также должны включить атрибут tabindex="0".

Следующее сгенерирует <a>, который выглядит как кнопка:

<b-button
  href="#"
  tabindex="0"
  v-b-popover.focus="'Контент всплывающего окна'"
  title="Заголовок всплывающего окна"
>
  Кнопка ссылки с директивой поповера
</b-button>

<b-button id="link-button" href="#" tabindex="0">
  Кнопка ссылки с компонентом поповера
</b-button>
<b-popover target="link-button" title="Заголовок всплывающего окна" triggers="focus">
  Контент всплывающего окна
</b-popover>

Закрыть при следующем нажатии (самозакрытие)

Используйте триггер focus отдельно, чтобы закрыть всплывающие окна при следующем щелчке, который делает пользователь. focus также заставляет всплывающее окно активироваться как при focus, так и при click (поскольку щелчок заставляет элемент получать фокус в большинстве браузеров, предполагая, что он находится в последовательности вкладок на странице).

Однако вы можете указать свой триггер как click blur, который заставит только щелчок активировать всплывающее окно, и либо щелчок по элементу, либо потеря фокуса на другом элементе или части документа закроет всплывающее окно.

Специальный триггер blur должен использоваться в сочетании с триггером click.

<template>
  <b-container fluid>
    <h5 class="my-3">Размещение</h5>
    <b-row>
      <b-col
        v-for="placement in placements"
        :key="placement"
        md="4"
        class="py-4 text-center"
      >
        <b-button :id="`popover-1-${placement}`" variant="primary">{{ placement }}</b-button>
        <b-popover
          :target="`popover-1-${placement}`"
          :placement="placement"
          title="Поповер!"
          triggers="hover focus"
          :content="`Размещение ${placement}`"
        ></b-popover>
      </b-col>
    </b-row>

    <h5 class="my-3">Контент через свойства или слоты</h5>
    <b-row>
      <b-col md="6" class="py-4 text-center">
        <b-button id="popover-2" variant="primary">Использование свойств</b-button>
        <b-popover
          target="popover-2"
          title="Примеры свойства"
          triggers="hover focus"
          content="Встраивание контента с использованием свойств очень просто"
        ></b-popover>
      </b-col>

      <b-col md="6" class="py-4 text-center">
        <b-button id="popover-3" variant="primary">Использование слотов</b-button>
        <b-popover target="popover-3" triggers="hover focus">
          <template #title>Контент через слоты</template>
          Встраивание контента <span class="text-danger">с использованием слотов</span> дает вам
          <em>более высокий <strong>контроль</strong></em> и базовую поддержку HTML.
        </b-popover>
      </b-col>
    </b-row>
  </b-container>
</template>

<script>
  export default {
    data() {
      return {
        placements: [
          'topright',
          'top',
          'topleft',
          'bottomright',
          'bottom',
          'bottomleft',
          'righttop',
          'right',
          'lefttop',
          'rightbottom',
          'left',
          'leftbottom'
        ]
      }
    }
  }
</script>

Параметры компонента через свойства

Свойство	По умолчанию	Описание	Поддерживаемые значения
`target`	`null`	Идентификатор строки элемента или ссылка на элемент или компонент, для которого вы хотите вызвать всплывающее окно. Обязательный	Любой действительный уникальный идентификатор элемента в документе или ссылка на элемент/компонент в документе
`title`	`null`	Заголовок всплывающего окна (только текст, без HTML). Если требуется HTML или реактивность, используйте именованный слот `title`	Простой текст
`content`	`null`	Содержимое всплывающего окна (только текст, без HTML). Если требуется HTML или реактивность, используйте слот по умолчанию.	Простой текст
`placement`	`'right'`	Позиционирование поповера относительно триггерного элемента.	`auto`, `top`, `bottom`, `left`, `right`, `topleft`, `topright`, `bottomleft`, `bottomright`, `lefttop`, `leftbottom`, `righttop`, `rightbottom`
`fallback-placement`	`'flip'`	Автоматическое переворачивание поведения всплывающего окна относительно триггерного элемента.	`flip`, `clockwise`, `counterclockwise` или массив допустимых мест размещения, оцениваемых слева направо
`disabled`	`false`	Программное управление состоянием отображения Popover. Рекомендуется использовать с модификатором синхронизации.	`true`, `false`
`triggers`	`'click'`	Разделенный пробелами список событий, которые вызовут открытие/закрытие всплывающего окна с помощью встроенной обработки	`hover`, `focus`, `click`. Обратите внимание, что `blur` — это специальный вариант использования, чтобы закрыть всплывающее окно при следующем щелчке.
`no-fade`	`false`	Отключить анимацию затухания, если установлено значение `true`	`true` или `false`
`delay`	`50`	Задержка показа и скрытия всплывающих окон на указанное количество миллисекунд. Также может быть определен как объект в форме `{ show: 100, hide: 400 }`, что позволяет отображать и скрывать различные задержки	`0` и выше, только целые числа.
`offset`	`0`	Сместить центр всплывающего окна на указанное количество пикселей. Также влияет на положение стрелки всплывающего окна.	Любое отрицательное или положительное целое число
`container`	`null`	Идентификатор строки элемента для добавления визуализированного всплывающего окна. Если `null` или элемент не найден, всплывающее окно добавляется к `<body>` (по умолчанию)	Любой действительный уникальный идентификатор элемента в документе.
`boundary`	`'scrollParent'`	Контейнер, в котором всплывающее окно будет визуально ограничено. В большинстве случаев должно быть достаточно значения по умолчанию, но вам может потребоваться изменить его, если ваш целевой элемент находится в небольшом контейнере с прокруткой переполнения.	`'scrollParent'` (по умолчанию), `'viewport'`, `'window'` или ссылка на элемент HTML.
`boundary-padding`	`5`	Количество пикселей, используемое для определения минимального расстояния между границами и всплывающим окном. Это гарантирует, что всплывающее окно всегда будет иметь небольшой отступ между краями своего контейнера.	Любое положительное число
`variant`	`null`	Контекстный вариант цвета всплывающего окна	Название любого контекстного варианта цвета темы
`custom-class`	`null`	Пользовательское имя класса для применения к элементу внешней оболочки всплывающего окна	Строка
`id`	`null`	Идентификатор для использования в корневом элементе всплывающего окна. Если ничего не указано, оно будет сгенерировано автоматически. Если вы предоставляете идентификатор, он должен быть уникальным на отображаемой странице.	Действительная строка уникального идентификатора элемента

Варианты и пользовательский класс

Всплывающие окна BootstrapVue поддерживают контекстные цветовые варианты через наш собственный CSS, через свойство variant:

<div class="text-center">
  <b-button id="popover-button-variant" href="#" tabindex="0">Кнопка</b-button>
  <b-popover target="popover-button-variant" variant="danger" triggers="focus">
    <template #title>Опасность!</template>
    Опасный вариант всплывающего окна
  </b-popover>
</div>

Варианты темы Bootstrap по умолчанию: danger, warning, success, primary, secondary, info, light и dark. Вы можете изменить или добавить дополнительные варианты через Bootstrap переменные SCSS

Пользовательский класс можно применить к внешней оболочке всплывающего окна <div> с помощью свойства custom-class:

<div class="text-center">
  <b-button id="my-button">Кнопка</b-button>
  <b-popover target="my-button" custom-class="my-popover-class">
    <template #title>Заголовок всплывающего окна</template>
    Контент всплывающего окна
  </b-popover>
</div>

variant и custom-class являются реактивными и могут быть изменены, пока всплывающее окно открыто.

Смотрите документацию директива всплывающего окна о применении вариантов и пользовательского класса к версии директивы.

Программно показать и скрыть всплывающее окно

Вы можете вручную управлять видимостью всплывающего окна с помощью синхронизируемой логической переменной show. Установка значения true покажет всплывающее окно, а установка значения false скроет всплывающее окно.

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-sync" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="show = !show">Переключить всплывающее окно</b-button>

      <b-popover :show.sync="show" target="popover-button-sync" title="Поповер">
        Привет <strong>Мир!</strong>
      </b-popover>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false
      }
    }
  }
</script>

Программное управление также может быть затронуто отправкой событий 'open' и 'close' во всплывающее окно по ссылке.

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-event" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="onOpen">Открыть</b-button>
      <b-button class="px-1" @click="onClose">Закрыть</b-button>
    </div>

    <b-popover ref="popover" target="popover-button-event" title="Поповер">
      Привет <strong>Мир!</strong>
    </b-popover>
  </div>
</template>

<script>
  export default {
    methods: {
      onOpen() {
        this.$refs.popover.$emit('open')
      },
      onClose() {
        this.$refs.popover.$emit('close')
      }
    }
  }
</script>

Чтобы всплывающее окно отображалось при начальном рендеринге, просто добавьте свойство show в <b-popover>:

<div class="text-center">
  <b-button id="popover-button-open" variant="primary">Кнопка</b-button>

  <b-popover show target="popover-button-open" title="Поповер">
    Я начинаю <strong>открывать</strong>
  </b-popover>
</div>

Всплывающее окно, открытое программно через свойство ‘show’ или вызовом события, может быть закрыто только программно. Встроенные триггеры будут работать некорректно, т.к. событие триггера попытается открыть поповер, даже если он уже открыт.

В приведенном ниже примере, когда первый Popover открывается с помощью события ‘open’, потребуется два нажатия кнопки, чтобы закрыть его. Поиграйте с приведенной ниже демонстрацией, чтобы понять это. Если вам нужна изящная обработка как программного управления компонентом Popover, так и триггеров взаимодействия с пользователем, вам следует отключить встроенные триггеры и управлять управлением самостоятельно, как показано во втором Popover.

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-manual-1" variant="primary" ref="button">Ненадежный</b-button>

      <b-popover target="popover-manual-1" :show.sync="pop1" triggers="click">
        Иногда я могу быть упрямым.
      </b-popover>
    </div>

    <div class="p-2">
      <b-button id="popover-manual-2" variant="primary" ref="button" @click="pop2 = !pop2">
        Комфортное онемение
      </b-button>

      <b-popover target="popover-manual-2" :show.sync="pop2" triggers="">
        Я верю, что это работает, хорошо.
      </b-popover>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="popOpen">Открыть</b-button>
      <b-button class="px-1" @click="popClose">Закрыть</b-button>
      <b-button class="px-1" @click="popToggle">Переключить</b-button>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        pop1: false,
        pop2: false
      }
    },
    methods: {
      popOpen() {
        this.pop1 = this.pop2 = true
      },
      popClose() {
        this.pop1 = this.pop2 = false
      },
      popToggle() {
        this.pop1 = !this.pop1
        this.pop2 = !this.pop2
      }
    }
  }
</script>

Вы также можете использовать события $root для запуска показа и скрытия всплывающих окон. Дополнительные сведения см. в разделе Скрытие и отображение всплывающих окон с помощью $root событий ниже.

Программное отключение всплывающих окон

Вы можете отключить всплывающее окно с помощью синхронизируемого логического свойства disabled (значение по умолчанию — false) установка его в true отключит всплывающее окно. Если всплывающее окно в настоящее время видимо, когда для параметра disabled установлено значение false, оно останется видимым до тех пор, пока не будет включено или программно закрыто. Если всплывающее окно отключено/включено с помощью $root событий (смотрите ниже), ваше значение disabled будет обновлено, если вы указали модификатор свойства .sync.

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-disable" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button @click="disabled = !disabled">
        {{ disabled ? 'Enable' : 'Disable' }} Поповер по свойству
      </b-button>
      <b-button @click="disableByRef">
        {{ disabled ? 'Enable' : 'Disable' }} Поповер по событию $ref
      </b-button>

      <b-popover
        :disabled.sync="disabled"
        target="popover-button-disable"
        title="Поповер"
        ref="popover"
      >
        Привет <strong>Мир!</strong>
      </b-popover>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        disabled: false
      }
    },
    methods: {
      disableByRef() {
        if (this.disabled) {
          this.$refs.popover.$emit('enable')
        } else {
          this.$refs.popover.$emit('disable')
        }
      }
    }
  }
</script>

На программное управление также можно воздействовать, отправляя события 'enable' и 'disable' во всплывающее окно по ссылке.

<template>
  <div class="d-flex flex-column text-md-center">
    <div class="p-2">
      <b-button id="popover-button-disable-event" variant="primary">У меня есть поповер</b-button>
    </div>

    <div class="p-2">
      <b-button class="px-1" @click="onEnable">Включить</b-button>
      <b-button class="px-1" @click="onDisable">Отключить</b-button>
    </div>

    <b-popover ref="popover" target="popover-button-disable-event" title="Поповер">
      Привет <strong>Мир!</strong>
    </b-popover>
  </div>
</template>

<script>
  export default {
    methods: {
      onEnable() {
        this.$refs.popover.$emit('enable')
      },
      onDisable() {
        this.$refs.popover.$emit('disable')
      }
    }
  }
</script>

Когда отключено, всплывающее окно можно открыть программно (через свойство show, методы или события).

Вы также можете использовать события $root для включения и отключения всплывающих окон. Дополнительные сведения см. в разделе Отключение и включение всплывающих окон с помощью $root событий ниже.

Использование директивы `v-b-popover`

Просто нужны быстрые всплывающие окна без лишней разметки? Используйте директиву v-b-popover:

<div>
  <b-container fluid>
    <b-row class="text-center">
      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.top="'Popover!'" title="Заголовок" variant="primary">Top</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.right="'Popover!'" title="Заголовок" variant="primary">Right</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.left="'Popover!'" title="Заголовок" variant="primary">Left</b-button>
      </b-col>

      <b-col md="3" class="py-3">
        <b-button v-b-popover.hover.bottom="'Popover!'" title="Заголовок" variant="primary">Bottom</b-button>
      </b-col>
    </b-row>
  </b-container>
</div>

Обратитесь к документации директивы v-b-popover для получения подробной информации об использовании директивы.

Расширенное использование `<b-popover>` с реактивным контентом

Вы даже можете сделать содержимое <b-popover> интерактивным. Просто помните, что нельзя использовать focus или триггеры (используйте только click).

Если вам абсолютно необходимо использовать триггер, отличный от click (или вы хотите отключить закрытие всплывающего окна при повторном щелчке элемента триггера), вы можете:

Слушайте событие hide элемента <b-popover> и вызовите метод preventDefault() при необходимости) для объекта BvEvent, переданного вашему обработчику hide;
Отключите ваш триггерный элемент (если возможно), как только всплывающее окно начнет открываться (через событие hide или hidden).

Для практических целей всплывающие окна с интерактивным контентом должны быть минимальными. Максимальная ширина всплывающего окна жестко закодирована в Bootstrap v4 CSS на 276px. С высокими всплывающими окнами на маленьких экранах может быть сложнее работать на мобильных устройствах (таких как смартфоны).

<template>
  <div id="my-container">
    <div class="my-3">
      
      <b-button id="popover-reactive-1" variant="primary" ref="button">
        Реактивный контент с использованием слотов
      </b-button>
    </div>

    
    <b-card title="Returned values:" v-if="input1Return && input2Return">
      <p class="card-text" style="max-width: 20rem;">
        Название: <strong>{{ input1Return }}</strong><br>
        Цвет: <strong>{{ input2Return }}</strong>
      </p>
    </b-card>

    
    
    
    <b-popover
      target="popover-reactive-1"
      triggers="click"
      :show.sync="popoverShow"
      placement="auto"
      container="my-container"
      ref="popover"
      @show="onShow"
      @shown="onShown"
      @hidden="onHidden"
    >
      <template #title>
        <b-button @click="onClose" class="close" aria-label="Close">
          <span class="d-inline-block" aria-hidden="true">&times;</span>
        </b-button>
        Интерактивный контент
      </template>

      <div>
        <b-form-group
          label="Name"
          label-for="popover-input-1"
          label-cols="3"
          :state="input1state"
          class="mb-1"
          description="Enter your name"
          invalid-feedback="This field is required"
        >
          <b-form-input
            ref="input1"
            id="popover-input-1"
            v-model="input1"
            :state="input1state"
            size="sm"
          ></b-form-input>
        </b-form-group>

        <b-form-group
          label="Color"
          label-for="popover-input-2"
          label-cols="3"
          :state="input2state"
          class="mb-1"
          description="Pick a color"
          invalid-feedback="This field is required"
        >
          <b-form-select
            id="popover-input-2"
            v-model="input2"
            :state="input2state"
            :options="options"
            size="sm"
          ></b-form-select>
        </b-form-group>

        <b-alert show class="small">
          <strong>Текущие значения:</strong><br>
          Название: <strong>{{ input1 }}</strong><br>
          Цвет: <strong>{{ input2 }}</strong>
        </b-alert>

        <b-button @click="onClose" size="sm" variant="danger">Отменить</b-button>
        <b-button @click="onOk" size="sm" variant="primary">Хорошо</b-button>
      </div>
    </b-popover>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        input1: '',
        input1state: null,
        input2: '',
        input2state: null,
        options: [{ text: '- Choose 1 -', value: '' }, 'Red', 'Green', 'Blue'],
        input1Return: '',
        input2Return: '',
        popoverShow: false
      }
    },
    watch: {
      input1(val) {
        if (val) {
          this.input1state = true
        }
      },
      input2(val) {
        if (val) {
          this.input2state = true
        }
      }
    },
    methods: {
      onClose() {
        this.popoverShow = false
      },
      onOk() {
        if (!this.input1) {
          this.input1state = false
        }
        if (!this.input2) {
          this.input2state = false
        }
        if (this.input1 && this.input2) {
          this.onClose()
          
          this.input1Return = this.input1
          this.input2Return = this.input2
        }
      },
      onShow() {
        
        
        this.input1 = ''
        this.input2 = ''
        this.input1state = null
        this.input2state = null
        this.input1Return = ''
        this.input2Return = ''
      },
      onShown() {
        
        
        this.focusRef(this.$refs.input1)
      },
      onHidden() {
        
        
        this.focusRef(this.$refs.button)
      },
      focusRef(ref) {
        
        
        
        
        this.$nextTick(() => {
          this.$nextTick(() => {
            ;(ref.$el || ref).focus()
          })
        })
      }
    }
  }
</script>

‘Global’ события экземпляра $root

Используя экземпляр $root , можно генерировать и прослушивать события где-то вне компонента, где используется <b-collapse>. Короче говоря, $root ведет себя как глобальный источник и слушатель событий. Подробности об экземпляре $root можно найти в официальной документации Vue.

Скрытие и отображение всплывающих окон с помощью событий $root

Вы можете закрыть (скрыть) все открытые всплывающие окна, создав событие bv::hide::popover в $root:

this.$root.$emit('bv::hide::popover')

Чтобы закрыть определенное всплывающее окно, передайте id триггерного элемента или id всплывающего окна (если он был предоставлен через свойство id) в качестве первого аргумента:

this.$root.$emit('bv::hide::popover', 'my-trigger-button-id')

Чтобы открыть (показать) определенное всплывающее окно, передайте id триггерного элемента или id всплывающего окна (если он был предоставлен через свойство id) в качестве первого аргумента при создании события bv::show::popover:

this.$root.$emit('bv::show::popover', 'my-trigger-button-id')

Чтобы открыть все всплывающие окна одновременно, опустите аргумент id при генерации события bv::show::popover.

Эти события работают как для версии компонента **, так и для версии директивы popover.

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

Отключение и включение всплывающих окон с помощью событий $root

Вы можете отключить все всплывающие окна, создав событие bv::disable::popover на $root:

this.$root.$emit('bv::disable::popover')

Чтобы отключить определенное всплывающее окно, передайте id триггерного элемента или id всплывающего окна (если он был предоставлен через свойство id) в качестве первого аргумента:

this.$root.$emit('bv::disable::popover', 'my-trigger-button-id')

Чтобы включить определенное всплывающее окно, передайте id триггерного элемента или id всплывающего окна (если он был предоставлен через свойство id) в качестве первого аргумента при создании события bv::enable::popover:

this.$root.$emit('bv::enable::popover', 'my-trigger-button-id')

Чтобы включить все всплывающие окна одновременно, опустите аргумент id при генерации события bv::enable::popover.

Эти события работают как для компонентной, так и для директивной версии popover.

Примечание: Элемент триггера должен существовать в DOM, чтобы всплывающее окно было включено или отключено.

Прослушивание изменений всплывающих окон с помощью событий $root

Чтобы прослушать любое всплывающее окно, используйте:

export default {
  mounted() {
    this.$root.$on('bv::popover::show', bvEventObj => {
      console.log('bvEventObj:', bvEventObj)
    })
  }
}

Полный список событий см. в разделе документации Событий.

Доступность

Всплывающие окна в их текущей реализации не слишком доступны при использовании в качестве интерактивных компонентов. Контент не может активно читаться пользователями программ чтения с экрана, а разметка всплывающего окна может располагаться не близко к элементу-триггеру в DOM (поскольку всплывающие окна обычно добавляются в конец <body>).

При использовании всплывающих окон в качестве интерактивного компонента вы должны по возможности переносить фокус в всплывающее окно. Когда всплывающее окно закрывается, вы должны вернуть фокус обратно на ваш триггерный элемент (при условии, что focus не используется в качестве метода триггера), как мы сделали в приведенном выше примере.

Вы также можете захотеть реализовать сдерживание фокуса в содержимом всплывающего окна, пока пользователь взаимодействует с ним (удерживая фокус внутри всплывающего окна, пока оно не будет закрыто пользователем).

Примечание: Эффект анимации этого компонента зависит от медиа-запроса prefers-reduced-motion. Дополнительную информацию см. в разделе с уменьшенным движением в нашей документации по специальным возможностям.

Настройка всплывающих окон для пользователей клавиатуры и вспомогательных технологий

Хотя вы можете вставлять богатый структурированный HTML и/или компоненты во всплывающие окна через слоты, мы настоятельно рекомендуем вам избегать добавления чрезмерного количества контента. В настоящее время всплывающие окна работают следующим образом: после отображения их содержимое привязывается к элементу триггера с атрибутом aria-describedby. В результате все содержимое всплывающего окна будет объявлено (прочитано) пользователям вспомогательных технологий как один длинный непрерывный поток.

Кроме того, хотя в всплывающее окно можно также включать интерактивные элементы управления (такие как элементы формы или ссылки), имейте в виду, что в настоящее время всплывающее окно не управляет порядком фокуса клавиатуры. Когда пользователь с клавиатурой открывает всплывающее окно, фокус остается на вызывающем его элементе, и, поскольку всплывающее окно обычно не следует сразу за триггером в структуре документа, нет гарантии, что перемещение вперед/нажатие Tab приведет к перемещению. пользователя клавиатуры в самом всплывающем окне. Короче говоря, простое добавление интерактивных элементов управления во всплывающее окно, вероятно, сделает эти элементы управления недоступными/непригодными для пользователей клавиатуры и пользователей вспомогательных технологий или, по крайней мере, приведет к нелогичному общему порядку фокуса. В этих случаях рассмотрите возможность использования вместо этого диалогового окна <b-modal>.

Справочник по компонентам

`<b-popover>`

<b-popover> Свойства
<b-popover> Слоты
<b-popover> События
<b-popover> $root Прослушиватели событий

Свойства

Все значения свойств по умолчанию настраиваются глобально.

Свойство (Click to sort ascending)	Тип (Click to sort ascending)	По умолчанию	Описание
`boundary`	`HTMLElement` или `Object` или `String`	`'scrollParent'`	Граничное ограничение всплывающего окна: ‘scrollParent’, ‘window’, ‘viewport’ или ссылка на HTMLElement или компонент.
`boundary-padding`	`Number` или `String`	`50`	Всплывающее окно попытается держаться подальше от края граничного элемента на указанное количество пикселей
`container`	`HTMLElement` или `Object` или `String`		Элемент контейнера для добавления визуализированного всплывающего окна, когда оно видимо. По умолчанию для элемента body
`content`	`String`		Текст для размещения в теле всплывающего окна
`custom-class`	`String`		Класс (или классы) CSS для применения к корневому элементу всплывающего окна
`delay`	`Number` или `Object` или `String`	`50`	Значение для отображения и скрытия задержки. Применяется как для отображения, так и для скрытия, если указано как число или строка. Используйте форму объекта, чтобы настроить отображение и скрытие задержек по отдельности
`disabled`	`Boolean`	`false`	Если установлено значение `true`, отключает функциональность компонента и переводит его в отключенное состояние.
`fallback-placement`	`Array` или `String`	`'flip'`	Место для использования, когда всплывающее окно выходит за границы. Обратитесь к документации для более подробной информации
`id`	`String`		Используется для установки атрибута `id` для визуализированного контента и используется в качестве основы для генерации любых дополнительных идентификаторов элементов по мере необходимости.
`no-fade`	`Boolean`	`false`	Если установлено значение `true`, отключает анимацию затухания/переход на компоненте
`noninteractive`	`Boolean`	`false`
`offset`	`Number` или `String`	`0`	Смещение (в пикселях) центра стрелки по сравнению с целевым элементом триггера
`placement`	`String`	`'right'`	Размещение всплывающего окна: Одно из ‘top’, ‘bottom’, ‘right’, ‘left’, ‘topleft’, ‘topright’, ‘bottomleft’, ‘bottomright’, ‘lefttop’, ‘leftbottom’, ‘righttop’, ‘rightbottom’
`show`	`Boolean`	`false`	Когда установлено, будет отображаться всплывающее окно
`target` Обязательный	`HTMLElement` или `SVGElement` или `Function` или `Object` или `String`		Идентификатор строки элемента или ссылка на элемент или компонент, для которого вы хотите вызвать всплывающее окно
`title`	`String`		Текст для размещения в заголовке всплывающего окна
`triggers`	`Array` или `String`	`'click'`	Укажите, какие триггеры будут отображать всплывающее окно. Поддерживаемые значения: ‘click’, ‘hover’, ‘focus’. Обратитесь к документации для специальных триггеров ‘blur’ и ‘manual’
`variant`	`String`		Применяет к компоненту один из цветовых вариантов темы Bootstrap

Слоты

Наименование	Описание
`default`	Слот для содержимого (поддерживается HTML/компоненты)
`title`	Необязательный слот для заголовка (поддерживается HTML/компоненты)

События

Событие (Click to sort ascending)	Аргументы	Описание
`bv::popover::disabled`	`bvEvent` — Объект BvEvent	Генерируется в $root, когда всплывающее окно становится отключенным
`bv::popover::enabled`	`bvEvent` — Объект BvEvent	Генерируется в $root, когда всплывающее окно становится включенным
`bv::popover::hidden`	`bvEvent` — Объект BvEvent	Генерируется в $root, когда всплывающее окно скрыто
`bv::popover::hide`	`bvEvent` — Объект BvEvent	Генерируется в $root, когда всплывающее окно должно быть скрыто. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
`bv::popover::show`	`bvEvent` — Объект BvEvent	Генерируется в $root, когда всплывающее окно вот-вот будет показано. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить показ
`bv::popover::shown`	`bvEvent` — Объект BvEvent	Генерируется в $root при отображении всплывающего окна
`disabled`	`bvEvent` — Объект BvEvent	Генерируется, когда всплывающее окно становится отключенным
`enabled`	`bvEvent` — Объект BvEvent	Генерируется, когда всплывающее окно становится включенным
`hidden`	`bvEvent` — Объект BvEvent	Генерируется, когда всплывающее окно скрыто
`hide`	`bvEvent` — Объект BvEvent	Генерируется, когда всплывающее окно должно быть скрыто. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить скрытие
`show`	`bvEvent` — Объект BvEvent	Генерируется, когда всплывающее окно вот-вот будет показано. Отменяемый. Вызовите bvEvent.preventDefault(), чтобы отменить показ
`shown`	`bvEvent` — Объект BvEvent	Генерируется при отображении всплывающего окна

`$root` слушатели событий

Вы можете управлять <b-popover>,
генерируя следующие события на $root:

Событие	Аргументы	Описание
`bv::disable::popover`	`id` — Идентификатор всплывающего окна для отключения (необязательно)	Отключить все или определенное всплывающее окно, когда это событие генерируется в $root
`bv::enable::popover`	`id` — Идентификатор всплывающего окна для включения (необязательно)	Включить все или определенное всплывающее окно, когда это событие генерируется в $root
`bv::hide::popover`	`id` — Идентификатор всплывающего окна, которое нужно скрыть (необязательно)	Закрыть (скрыть) все или определенное открытое всплывающее окно, когда это событие генерируется в $root
`bv::show::popover`	`id` — Идентификатор всплывающего окна для отображения (необязательно)	Открыть (показать) все или конкретное всплывающее окно, когда это событие генерируется в $root

Импорт отдельных компонентов

Вы можете импортировать отдельные компоненты в свой проект с помощью следующих именованных экспортов:

Компонент	Именованный экспорт	Путь импорта
`<b-popover>`	`BPopover`	`bootstrap-vue`

Пример:

import { BPopover } from 'bootstrap-vue'
Vue.component('b-popover', BPopover)

Импортировать как плагин Vue.js

Этот плагин включает в себя все перечисленные выше отдельные компоненты.
Плагины также включают псевдонимы любых компонентов.

Именованный экспорт	Путь импорта
`PopoverPlugin`	`bootstrap-vue`

Этот плагин также автоматически включает следующие плагины:

VBPopoverPlugin

Пример:

import { PopoverPlugin } from 'bootstrap-vue'
Vue.use(PopoverPlugin)

Источник

Обзор

Примеры

Включить всплывающие окна

Живая демонстрация

Четыре направления

Пользовательский container

Пользовательские всплывающие окна

Закрыть при следующем клике

Обязательная специальная разметка для dismiss-on-next-click

Отключенные элементы

CSS

Переменные

Переменные Sass

Использование

Настройка всплывающих окон для пользователей клавиатуры и вспомогательных технологий

Опции

Атрибуты данных для отдельных всплывающих окон

Использование функции с popperConfig

Методы

События

jquery.validate.bootstrap.popover

Dependency

Options

HTML data attribute options

Public Methods

License

Popovers — API

Usage

Via data attributes

Via JavaScript:

Making popovers work for keyboard and assistive technology users

Options

Methods

Events

Import

CSS variables

SCSS variables

Обзор

Цель

Позиционирование

Триггеры

Предостережения с триггером focus на элементах <button>

Закрыть при следующем нажатии (самозакрытие)

Параметры компонента через свойства

Варианты и пользовательский класс

Программно показать и скрыть всплывающее окно

Программное отключение всплывающих окон

Использование директивы v-b-popover

Расширенное использование <b-popover> с реактивным контентом

‘Global’ события экземпляра $root

Скрытие и отображение всплывающих окон с помощью событий $root

Отключение и включение всплывающих окон с помощью событий $root

Прослушивание изменений всплывающих окон с помощью событий $root

Доступность

Настройка всплывающих окон для пользователей клавиатуры и вспомогательных технологий

Справочник по компонентам

Свойства

Слоты

События

$root слушатели событий

Импорт отдельных компонентов

Импортировать как плагин Vue.js

Пользовательский `container`

Использование функции с `popperConfig`

Popovers

— API

Предостережения с триггером `focus` на элементах `<button>`

Использование директивы `v-b-popover`

Расширенное использование `<b-popover>` с реактивным контентом

`$root` слушатели событий