Bootstrap 3.0 Popovers and Tooltips

Bootstrap 3.0 Popovers and tooltips

Turns out that Evan Larsen has the best answer. Please upvote his answer (and/or select it as the correct answer) - it's brilliant.

Working jsFiddle here

Using Evan's trick, you can instantiate all tooltips with one line of code:

$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});

You will see that all tooltips in your long paragraph have working tooltips with just that one line.

In the jsFiddle example (link above), I also added a situation where one tooltip (by the Sign-In button) is ON by default. Also, the tooltip code is ADDED to the button in jQuery, not in the HTML markup.

---

Popovers do work the same as the tooltips:

$('[data-toggle="popover"]').popover({trigger: 'hover','placement': 'top'});

---

And there you have it! Success at last.

One of the biggest problems in figuring this stuff out was making bootstrap work with jsFiddle... Here's what you must do:

1. Get reference for Twitter Bootstrap CDN from here: http://www.bootstrapcdn.com/
   
2. Paste each link into notepad and strip out ALL except the URL. For example:
   
   //netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css
   
3. In jsFiddle, on left side, open the External Resources accordion dropdown
4. Paste in each URL, pressing plus sign after each paste
5. Now, open the "Frameworks & Extensions" accordion dropdown, and select jQuery 1.9.1 (or whichever...)

NOW you are ready to go.

Bootstrap 3 popover and tooltip on the same element

You dont have to use data-toggle, title and so on. Invoke the bootstrap plugins manually. See this example :

<table>
  <tr tooltip-title="Tooltip title #1" 
      popover-title="popover title #1" 
      popover-content="popover content #1">
    <td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwerty</td>  
  </tr>
  <tr tooltip-title="Tooltip title #2" 
      popover-title="popover title #2" 
      popover-content="popover content #2">
    <td>qwerty</td><td>qwerty</td><td>qwerty</td><td>qwerty</td>               
  </tr>
</table> 

script :

$('tr').each(function() {
  $(this).popover({    
    content : $(this).attr("popover-content"),
    title : $(this).attr("popover-title")         
  })     
  $(this).tooltip({    
    placement : 'bottom',  
    title : $(this).attr("tooltip-title")         
  })     
})

demo fiddle -> http://jsfiddle.net/79fXt/

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

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

Bootstrap 3 Tooltips or Popovers doesn't work

You just need to enable the tooltip via javascript:

$('some id or class that you add to the above a tag').tooltip()

Bootstrap 3 Popover on click AND hover

I usually include this in the element: data-trigger="hover click"

So in your example:

<a href="#" rel="popover" data-trigger="hover click" data-placement="bottom" title="Call Sales"><i class="icon-phone"></i><b>Call Sales</b></a>

Twitter Bootstrap: Popover vs Tooltip?

Popovers require Tooltips to be included. Aside from the visual difference, popovers have an option to display both a title and content, while tooltips only have an option to display a title.

---

Related Topics