Bootstrap 3の同じ要素のポップオーバーとツールチップ - ツールチップが起動しない

Question

私は要素に異なる内容のポップオーバーとツールチップを追加しようとしています。

ポップオーバーは機能するはずですが、ツールチップは起動しません。ここで

は私がしようとしているものです：

HTML

<div 
    class="myPopover" 
    data-html="true" 
    popover-title="<h4>title popover</h4>" 
    popover-content="msg popover" 
    data-tooltip="tooltip" 
    title-tooltip="<h4>Title tooltip</h4>mesage in tooltip" 
> 
    hover/click me 
</div> 

JS

var toolTipSettings = { 
    trigger: 'hover', 
    container: 'body', 
    placement: 'left', 
    title: function(){ 
    return $(this).attr('title-tooltip'); 
    } 
} 

var popOverSettings = { 
    trigger: 'click', 
    placement: 'bottom', 
    container: 'body', 
    selector: '.myPopover', 
    title: function(){ 
    return $(this).attr('popover-title'); 
    }, 
    content: function() { 
    return $(this).attr('popover-content'); 
    } 
} 

$('body').popover(popOverSettings); 
$('[data-tooltip="tooltip"]').tooltip(toolTipSettings); 

はこれを行うには良い方法はありますか？

Here's a bootply to show code in action

Answer 1

あなたBootplyで少し遊んでた後、私はあなたの問題を参照してください。ツールチップは.myPopover要素の左側に配置しています。しかし、この要素は現在scrrenの100％の幅を持っています。つまり、画面の左と右にあなたの余分な部分が表示されます。それはが表示されます、あなたはそれを見ることができません。

ちょうどあなたが始めるのは、このCSSは、あなたがアクションでそれを見ることができます追加：

.myPopover { 
    margin-top: 60px; 
    margin-left: auto;  //Margin left and right to auto to center element 
    margin-right: auto; 
    width: 200px;   //Set width so it doesn't consume 100% 
    text-align: center; 
    cursor: pointer; 
} 

Updated Bootply