web-dev-qa-db-ja.com

Bootstrap 4 HTMLコンテンツのポップオーバー

これは私のコードですが、機能しません。

コンテンツにネイティブのBootstrap PopOver with HTMLを使用すると、フロントエンドにPopOverが表示されず、HTMLソースの形式が正しくありません。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>   
        <style>
            .popover{
                color: #757575 !important;
            }
        </style>
    </head>
    <body>
        <div class="container">
             <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div class="popover">text text</div>">Toggle popover</span>
        </div>
        <script>
            $(function () {
                $('[data-toggle="popover"]').popover()
            })
        </script>
    </body>
</html>

クラスプロパティを削除します。それは働くことができます。

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <link href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
        <title>test</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/popper.js/1.11.0/umd/popper.min.js" ></script>
        <script src="https://cdn.bootcss.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>   
        <style>
            .popover{
                color: #757575 !important;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <span href="#" data-toggle="popover" title="Popover Header" data-html="true" data-content="<div>text text</div>">Toggle popover</span>
        </div>
        <script>
            $(function () {
                $('[data-toggle="popover"]').popover()
            })
        </script>
    </body>
</html>

bootstrap popover内にHTMLを表示しようとしていますが、どういうわけか機能していません。ここでいくつかの回答が見つかりましたが、機能しません。何かを実行している場合はお知らせください違う。

javascriptjqueryhtmltwitter-bootstrapbootstrap-4
5
Nguyễn

popoverクラスをこのように一重引用符で囲むだけです。

<div class='popover'>text text</div>

の代わりに

<div class="popover">text text</div>
5
devN

ポップオーバースパンでdata-html="true"を使用できます。

これにより、HTMLコンテンツが有効になります。

詳細はこちら： http://getbootstrap.com/docs/4.0/components/popovers/#options

13
Klooven

すべてのポップオーバーにdata-html="true"を追加する代わりに、次のように使用できます。

$('[data-toggle="popover"]').popover({html:true});
2
Isin Altinkaya
$element.popover({
    animation: false,
    html: true,
    sanitize: false,
    placement: 'bottom',
    trigger: 'manual',
    content: '<button type="button" id="button-image" class="btn btn-primary"><i class="mdi mdi-edit"></i></button> <button type="button" id="button-clear" class="btn btn-danger"><i class="mdi mdi-trash-can-outline"></i></button>',
});
0
Fahrettin Aksoy