Bootstrap Popover - как добавить ссылку в текст popover?

Я использую Boosttrap 3 Popover.

А теперь я бы хотел ссылку на текстовый попвовер.

Код:

<a href="#" 
  role="button" 
  class="btn popovers" 
  data-toggle="popover" 
  title="" 
  data-content="test content <a href="" title="test add link">link on content</a>" 
  data-original-title="test title"
  >
  test link
</a>

Но когда я запускаю код в HTML, я вижу:

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content &lt;a href=" "="">link on content</a>
" 
data-original-title="test title"
&gt;
test link

Я знаю эту проблему в символе " но я не знаю, добавить ссылку в ссылку...

Подскажите пожалуйста как будет правильный код?

PS: если вопрос уже существует, пожалуйста, дайте мне ссылку.

Ответы

Ответ 1

Вам нужно передать опцию html со значением true при инициализации popover, как показано ниже.

Демо

JS:

$("[data-toggle=popover]")
.popover({html:true})

HTML:

<a href="#" role="button" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-original-title="test title">test link</a>

Ответ 2

Просто используйте атрибут data-html = "true" .

<button
  data-toggle="popover"
  data-content="Link: <a href='xyz.com'>XYZ</a>"
  data-html="true">
  CLICK
</button>

Ответ 3

Я использовал data-trigger="focus" и имел проблему со ссылкой в контенте popover. Если щелкнуть мышью по ссылке и удерживать какое-то время, всплывающее окно исчезает и ссылка "не работает". Некоторые клиенты жаловались на это. Вы можете воспроизвести проблему здесь.

Я использовал следующий код для решения проблемы:

data-trigger="manual" в html и

$("[data-toggle=popover]")
.popover({ html: true})
    .on("focus", function () {
        $(this).popover("show");
    }).on("focusout", function () {
        var _this = this;
        if (!$(".popover:hover").length) {
            $(this).popover("hide");
        }
        else {
            $('.popover').mouseleave(function() {
                $(_this).popover("hide");
                $(this).off('mouseleave');
            });
        }
    });

Ответ 4

<a href="#" class="btn popovers" data-toggle="popover" title="" data-content="test content <a href='' title='test add link'>link on content</a>" data-html="true"><i class="glyphicon glyphicon-info-sign"></i></a>

Просто добавив data-html = "true" работает со ссылкой:)

Ответ 5

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

$('body')
  .on('mousedown', '.popover', function(e) {
    e.preventDefault()
  });
});

Ответ 6

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

Ответ 7

$("body").on("mousedown",".my-popover-content a",function(e){
    document.location = e.target.href;
});

делает это для меня: в основном, взять дело в свои руки. Опять же, это с опциями поповера html: true, sanitize: false и trigger: "focus"