1. ホーム
  2. jquery

Bootstrapの'popover'コンテナにクラスを動的に追加する

2023-10-01 08:10:01

質問

StackOverflow と Google の両方で徹底的に検索しましたが、何も見つかりませんでした。そのため、これがすでに質問され、解決されている場合は、事前に謝罪してください。

NBです。 私はjQueryの初心者なので、これをどのように書き上げたらいいのか自分でもよくわかりません。これは簡単なスニペットコードであると確信していますが、私の頭を包むことができません。

私がやりたいのは data- 要素(例えば data-class など) を使って、トップレベルのポップオーバーに新しいクラス (または ID、もうこだわらない!) を追加することができます。 <div> . 私が現在持っているコードは以下の通りです。

jQueryを使用します。

$('a[rel=popover]')
    .popover({
        placement : 'bottom',
        trigger : 'hover'
    })
    .click(function(e) {
        e.preventDefault()
    });

HTMLです。

<a href="" rel="popover" data-class="dynamic-class" title="Title goes here" data-content="Content goes here">

そして、理想的には、このようなHTMLを吐き出すことになります。

<div class="popover ... dynamic-class">
    <!-- remainder of the popover code as per usual -->
</div>

これは私にできることなのでしょうか?ブートストラップサイトのポップオーバーのドキュメントは少しまばらなので、残念ながらここまでたどり着くのに時間がかかってしまいました :(

どんな&すべての応答に前もって感謝します!

どのように解決するのですか?

Bootstrapをハックすることなく、またテンプレートを変更することなく、ポップオーバー・オブジェクトを呼び出し元の data からポップオーバーオブジェクトを取得し、その $tip プロパティにアクセスします。

$('a[rel=popover]')
  .popover({ placement: 'bottom', trigger: 'hover' })
  .data('bs.popover')
  .tip()
  .addClass('my-super-popover');