CODEWITHSUNDEEP
twitter-bootstrap
StudioTime
StudioTime

Reputation: 23979

Bootstrap 3 popover & tooltip on same element - tooltip doesn't fire

I'm trying to simply add a popover and tooltip to an element, each with different content.

The popover works as it should but the tooltip doesn't fire.

Here's what I'm trying:

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

Is there a better way to do this?

Here's a bootply to show code in action

Upvotes: 2

Views: 401

Answers (1)

Tricky12
Tricky12

Reputation: 6822

After playing around a bit with your Bootply, I see your problem. You are placing your tooltip on the left of your .myPopover element. However, this element currently has 100% width of the scrren, meaning your tooptip appears to the left and off of the screen. It IS showing up, you just can't see it.

Just to get you started, adding this CSS lets you see it in action:

.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

Upvotes: 2

Related Questions