Bootstrap 3 Popover & Tooltip auf demselben Element - Tooltip feuert nicht

Question

Ich versuche einfach ein Popover und Tooltip zu einem Element hinzuzufügen, jedes mit unterschiedlichem Inhalt.

Das Popover funktioniert so, wie es sollte, aber der Tooltip wird nicht ausgelöst.

Hier ist, was ich versuche:

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); 

Gibt es einen besseren Weg, dies zu tun?

Here's a bootply to show code in action

Answer 1

Nachdem mit Ihrem Bootply um ein bisschen zu spielen, sehe ich Ihr Problem. Sie platzieren Ihren Tooltip auf der linken Seite Ihres Elements .myPopover. Dieses Element hat derzeit jedoch eine Breite von 100%, was bedeutet, dass der Tooptip links und neben dem Bildschirm angezeigt wird. Es IS zeigt sich, Sie können es einfach nicht sehen.

Nur Sie zu erhalten begonnen, diese CSS Hinzufügen können Sie es in Aktion zu sehen:

.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