web-dev-qa-db-ja.com

Bootstrap Popover-テキストポップオーバーにリンクを追加する方法は？

私はbootstrap 3 popoverを使用します。

そして今、私はテキストpopvoverのリンクが欲しい。

コード：

<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

シンボル"しかし、リンクにリンクを追加したかどうかはわかりません...

適切なコードになる方法を教えてください

追記：質問が既に存在する場合、リンクをお願いします。

htmlhyperlinktwitter-bootstrap-3popover
51
user2881809

次のようにポップオーバーを初期化するときに、htmlオプションに値trueを渡す必要があります。

デモ

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>
87
nik

属性data-html = "true"を使用するだけです。

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

data-trigger="focus"を使用しましたが、ポップオーバーのコンテンツのリンクに問題がありました。リンク上でマウスボタンをクリックしてしばらく保持すると、ポップオーバーが消えてリンクが「機能しなくなります」。一部のクライアントはそれについて文句を言いました。問題を再現できます こちら 。

次の code を使用して問題を修正しました。

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
Daniil Grankin
<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"を追加するだけで、リンク属性が機能します:)

2
user7961627

フォーカスandポップアップ内のリンクを使用する場合は、内部をクリックしたときにポップアップが閉じないようにする必要があります。私が見つけた最もきれいな解決策は、preventDefault Popup内の.popoverクラス

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

与えられた答えが正しい一方で、リンクがdata-trigger="focus"が適用されます。私が見つけたようにクライアントからポップオーバーでクリックがすばやく発生すると、ユーザーがマウスボタンを押したままにすると、残念ながらトリガーが作動してポップオーバーが発生し、リンクが実行されます。要するに、リンクが必要かどうかを考慮し、スロウクリックを計画します。

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

私のためにそれをします：基本的に、あなた自身の手に問題を取ります。繰り返しますが、これはポップオーバーオプションhtml: true、sanitize: false、およびtrigger : "focus"

0
David