2017-11-02 5 views
1

ブートストラップポップオーバーとツールチップを同じ要素(glyphicon-plus)に適用しようとしています。ブートストラップのツールチップとポップオーバーを同じ要素にまとめて

<a href ="#"><span class = "pull-right glyphicon glyphicon-plus" tooltip-title = "Save a bookmark" popover-title = "Save your bookmarks here" popover-content = "abc"></span></a> 

Javascriptを:

$(document).ready(function() { 
    $(this).popover({ 

    content : $(this).attr("popover-content"), 

    title : $(this).attr("popover-title")   
    }) 

    $(this).tooltip({ 

    placement : 'bottom', 

    title : $(this).attr("tooltip-title")   
    });  
}); 

誰かがこれを行うための正しい方法は何か導くことはできますか?

+0

実際には、https://getbootstrap.com/docs/3.3/javascript/#popovers ...またはコードに基づいて決して確立されない '$(this)'を定義することによって、ポップオーバーJavaScriptを実際に初期化することから始めるかもしれません。 –

+0

@RobertC Okありがとう:)しかし、ポップオーバーとツールチップの両方を初期化する必要があります。 –

答えて

0

1およびその他でpopoverトリガーでtooltipを置かないなぜ我々は二つの別々のHTML要素<a><span>を持っていることを考えると?もちろん、あなたはまた、両方を初期化する必要があります:あなたはここで使用しているJavaScriptのコンポーネント

https://getbootstrap.com/docs/3.3/javascript/#tooltips

2は、オプトインしていると、あなたの上記のコードは、彼らがこれまでにロードできるようになる任意の初期設定が欠落しています。

$(function() { 
 
    $('[data-toggle="tooltip"]').tooltip({ 
 
    container: 'body', 
 
    html: false 
 
    }); 
 
    
 
    $('[data-toggle="popover"]').popover({ 
 
    container: 'body', 
 
    html: false 
 
    }); 
 
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<a href="#" data-toggle="tooltip" title="Save a Bookmark" data-placement="right"> 
 
    <span class="glyphicon glyphicon-plus" data-toggle="popover" data-placement="right" title="Save your bookmarks here" data-content="abc"></span> 
 
</a> 
 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

また、適切な位置決めや位置合わせのためのcontainerを指定して、あなたはどちらか(私は私の例ではfalseに設定した)でHTMLを許可するかどうかをする必要があります。

この解決策では、data-placementを配置することができるため、同じプレースメントを使用するすべてのツールチップまたはポップオーバーに限定する必要はありません。また、トリガーを別々の要素に分けたので、タイトルやコンテンツなどを引き出すためのカスタムデータ属性を作成する心配はありません。標準的なBootstrap属性を使用しています。

+0

ありがとう:)これは働いた –

関連する問題