Popover or Tooltip Bootstrap with long text

Asked

Viewed 5,057 times

4

How to display a long text with breaks in a Twitter Bootstrap Popover or Tooltip? And there’s one more problem, Popover only opens at the second click! Does anyone know why?

What I did:

$('.btn-text-pop').click(function(event) {
    event.preventDefault();
    $(this).popover({html:true});
});

$('.btn-text-too').tooltip();

and html

<button 
    type="button" 
    data-toggle="popover" 
    class="btn btn-default btn-xs btn-text-pop"
    data-original-title="" 
    data-container="body"
    title=""
    data-content="Bacon ipsum dolor sit amet salami tri-tip capicola landjaeger. Kielbasa flank turkey ham hock, fatback capicola chuck jerky tail. Drumstick venison bresaola, ham hock brisket flank doner shankle tail spare ribs short ribs bacon turducken. Pancetta kielbasa turkey pork loin, turducken jerky strip steak. Pancetta shank t-bone tail, beef sirloin jowl frankfurter chicken jerky leberkas beef ribs swine hamburger turkey. Turducken ribeye jerky ball tip shank, capicola corned beef meatloaf frankfurter. Pork belly drumstick prosciutto jerky chicken tail pork loin, shoulder landjaeger sirloin sausage pig.

Chuck pork belly ribeye beef ribs. Kielbasa swine beef pancetta, boudin chicken doner beef ribs shankle venison landjaeger corned beef jowl capicola. Pastrami kielbasa flank, pig brisket turducken cow beef ribs porchetta landjaeger turkey. Pork shankle kielbasa corned beef hamburger filet mignon turducken. Strip steak ham hock t-bone tongue prosciutto drumstick. Sirloin jerky rump meatball. Shoulder capicola jerky meatball, sirloin short loin ground round drumstick rump filet mignon shankle.

Tail pork t-bone beef ribs. Kielbasa ham hock pig venison, salami porchetta capicola ball tip shoulder biltong pork chop filet mignon beef ribs. Spare ribs kevin leberkas capicola, shankle pork belly ham strip steak swine. Salami capicola tongue spare ribs, ham venison meatball.

Tri-tip ribeye biltong beef ribs shankle chicken turducken jerky. Pork loin landjaeger capicola salami, rump kielbasa pork chop shank spare ribs kevin jowl. Chicken drumstick bacon leberkas, jowl tri-tip ground round venison andouille short ribs pork loin boudin flank shankle. Short loin shank ribeye swine, bresaola shankle jerky drumstick. Meatloaf shoulder turkey prosciutto corned beef, boudin meatball shankle venison doner pork chop rump biltong pig shank.

T-bone landjaeger porchetta pancetta. Ham hock tail sausage meatball pig fatback. Jowl frankfurter landjaeger biltong capicola sausage tri-tip salami sirloin jerky kevin doner. Tri-tip sausage chicken boudin ham.

Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!">
    <span class="glyphicon glyphicon-align-left"></span>
</button>

<br><br>

<button 
    type="button" 
    data-toggle="tooltip" 
    data-placement="right"
    class="btn btn-default btn-xs btn-text-too"
    title="Bacon ipsum dolor sit amet salami tri-tip capicola landjaeger. Kielbasa flank turkey ham hock, fatback capicola chuck jerky tail. Drumstick venison bresaola, ham hock brisket flank doner shankle tail spare ribs short ribs bacon turducken. Pancetta kielbasa turkey pork loin, turducken jerky strip steak. Pancetta shank t-bone tail, beef sirloin jowl frankfurter chicken jerky leberkas beef ribs swine hamburger turkey. Turducken ribeye jerky ball tip shank, capicola corned beef meatloaf frankfurter. Pork belly drumstick prosciutto jerky chicken tail pork loin, shoulder landjaeger sirloin sausage pig.

Chuck pork belly ribeye beef ribs. Kielbasa swine beef pancetta, boudin chicken doner beef ribs shankle venison landjaeger corned beef jowl capicola. Pastrami kielbasa flank, pig brisket turducken cow beef ribs porchetta landjaeger turkey. Pork shankle kielbasa corned beef hamburger filet mignon turducken. Strip steak ham hock t-bone tongue prosciutto drumstick. Sirloin jerky rump meatball. Shoulder capicola jerky meatball, sirloin short loin ground round drumstick rump filet mignon shankle.

Tail pork t-bone beef ribs. Kielbasa ham hock pig venison, salami porchetta capicola ball tip shoulder biltong pork chop filet mignon beef ribs. Spare ribs kevin leberkas capicola, shankle pork belly ham strip steak swine. Salami capicola tongue spare ribs, ham venison meatball.

Tri-tip ribeye biltong beef ribs shankle chicken turducken jerky. Pork loin landjaeger capicola salami, rump kielbasa pork chop shank spare ribs kevin jowl. Chicken drumstick bacon leberkas, jowl tri-tip ground round venison andouille short ribs pork loin boudin flank shankle. Short loin shank ribeye swine, bresaola shankle jerky drumstick. Meatloaf shoulder turkey prosciutto corned beef, boudin meatball shankle venison doner pork chop rump biltong pig shank.

T-bone landjaeger porchetta pancetta. Ham hock tail sausage meatball pig fatback. Jowl frankfurter landjaeger biltong capicola sausage tri-tip salami sirloin jerky kevin doner. Tri-tip sausage chicken boudin ham.

Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!">
    <span class="glyphicon glyphicon-align-left"></span>
</button>

Follow link to the jsfiddle

twitter-bootstrap
  • 1

    Check my update and see if this is how you want it: http://jsfiddle.net/kr2pz6sk/2/ Click here works the first click.

  • 1

    @Jorgeb. Here only open in the second click, both the AP and your.

1 answer

5


Place different:

$(function(){   
    $('.btn-text-pop').popover({html:true});        
    $('.btn-text-too').tooltip();
});

Because, first he’s running an event click to add popover on the button referent, why it will only work the second time, then put at the time of the end of the DOM loading of the form above.

Online Example: Jsfildde

Line-breaking (<br>) us tooltip and popover put as configuration {html:true} in Javascript or a tag button data-html="true" and add <br> the will...

<button type="button" data-toggle="popover" class="btn btn-default btn-xs btn-text-pop"
    data-original-title="" data-container="body" title="" data-html="true"
    data-content="Bacon ipsum dolor sit amet salami tri-tip capicola landjaeger. Kielbasa flank turkey ham hock, fatback capicola chuck jerky tail. Drumstick venison bresaola, ham hock brisket flank doner shankle tail spare ribs short ribs bacon turducken. Pancetta kielbasa turkey pork loin, turducken jerky strip steak. Pancetta shank t-bone tail, beef sirloin jowl frankfurter chicken jerky leberkas beef ribs swine hamburger turkey. Turducken ribeye jerky ball tip shank, capicola corned beef meatloaf frankfurter. Pork belly drumstick prosciutto jerky chicken tail pork loin, shoulder landjaeger sirloin sausage pig.<br><br>
Chuck pork belly ribeye beef ribs. Kielbasa swine beef pancetta, boudin chicken doner beef ribs shankle venison landjaeger corned beef jowl capicola. Pastrami kielbasa flank, pig brisket turducken cow beef ribs porchetta landjaeger turkey. Pork shankle kielbasa corned beef hamburger filet mignon turducken. Strip steak ham hock t-bone tongue prosciutto drumstick. Sirloin jerky rump meatball. Shoulder capicola jerky meatball, sirloin short loin ground round drumstick rump filet mignon shankle.
<br><br>
Tail pork t-bone beef ribs. Kielbasa ham hock pig venison, salami porchetta capicola ball tip shoulder biltong pork chop filet mignon beef ribs. Spare ribs kevin leberkas capicola, shankle pork belly ham strip steak swine. Salami capicola tongue spare ribs, ham venison meatball.
<br>
Tri-tip ribeye biltong beef ribs shankle chicken turducken jerky. Pork loin landjaeger capicola salami, rump kielbasa pork chop shank spare ribs kevin jowl. Chicken drumstick bacon leberkas, jowl tri-tip ground round venison andouille short ribs pork loin boudin flank shankle. Short loin shank ribeye swine, bresaola shankle jerky drumstick. Meatloaf shoulder turkey prosciutto corned beef, boudin meatball shankle venison doner pork chop rump biltong pig shank.
<br><br>
T-bone landjaeger porchetta pancetta. Ham hock tail sausage meatball pig fatback. Jowl frankfurter landjaeger biltong capicola sausage tri-tip salami sirloin jerky kevin doner. Tri-tip sausage chicken boudin ham.
<br><br>
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!">
    <span class="glyphicon glyphicon-align-left"></span>
</button>

<br><br>

<button type="button" data-html="true" data-toggle="tooltip" data-placement="right"
    class="btn btn-default btn-xs btn-text-too" title="Bacon ipsum dolor sit amet salami tri-tip capicola landjaeger. Kielbasa flank turkey ham hock, fatback capicola chuck jerky tail. Drumstick venison bresaola, ham hock brisket flank doner shankle tail spare ribs short ribs bacon turducken. Pancetta kielbasa turkey pork loin, turducken jerky strip steak. Pancetta shank t-bone tail, beef sirloin jowl frankfurter chicken jerky leberkas beef ribs swine hamburger turkey. Turducken ribeye jerky ball tip shank, capicola corned beef meatloaf frankfurter. Pork belly drumstick prosciutto jerky chicken tail pork loin, shoulder landjaeger sirloin sausage pig.
<br><br>
Chuck pork belly ribeye beef ribs. Kielbasa swine beef pancetta, boudin chicken doner beef ribs shankle venison landjaeger corned beef jowl capicola. Pastrami kielbasa flank, pig brisket turducken cow beef ribs porchetta landjaeger turkey. Pork shankle kielbasa corned beef hamburger filet mignon turducken. Strip steak ham hock t-bone tongue prosciutto drumstick. Sirloin jerky rump meatball. Shoulder capicola jerky meatball, sirloin short loin ground round drumstick rump filet mignon shankle.
<br><br>
Tail pork t-bone beef ribs. Kielbasa ham hock pig venison, salami porchetta capicola ball tip shoulder biltong pork chop filet mignon beef ribs. Spare ribs kevin leberkas capicola, shankle pork belly ham strip steak swine. Salami capicola tongue spare ribs, ham venison meatball.
<br><br>
Tri-tip ribeye biltong beef ribs shankle chicken turducken jerky. Pork loin landjaeger capicola salami, rump kielbasa pork chop shank spare ribs kevin jowl. Chicken drumstick bacon leberkas, jowl tri-tip ground round venison andouille short ribs pork loin boudin flank shankle. Short loin shank ribeye swine, bresaola shankle jerky drumstick. Meatloaf shoulder turkey prosciutto corned beef, boudin meatball shankle venison doner pork chop rump biltong pig shank.
<br><br>
T-bone landjaeger porchetta pancetta. Ham hock tail sausage meatball pig fatback. Jowl frankfurter landjaeger biltong capicola sausage tri-tip salami sirloin jerky kevin doner. Tri-tip sausage chicken boudin ham.
<br><br>
Does your lorem ipsum text long for something a little meatier? Give our generator a try… it’s tasty!">
    <span class="glyphicon glyphicon-align-left"></span>
</button>

$(function(){   
    $('.btn-text-pop').popover({html:true});        
    $('.btn-text-too').tooltip({html:true});
});

Online Example: Jsfiddle

  • An even resolved part, I made only one adaptations to my use, in css I decrease a little the max-width. But what I haven’t been able to do is that the line breaks are displayed with breaks and not run in the way that this.

  • I got it @Marcelodiniz I’ll see !!! if you get put here.

  • @Marcelodiniz see this link http://jsfiddle.net/8peosk5f/12/ and the edit in the reply!

  • Thanks for the help, I got to put the settings to html, but it didn’t work. I saw your example and this ok, but this pq has the <br> , already in the example text has not and is like this being saved in the database, with nothing (probably it saves an n) but even when I look straight at the base does not show neither the n and only a line break.

  • @Marcelodiniz what is the language?

  • Behind I’m using php. If I put one nl2br already works. Valew

  • Yes @Marcelodiniz put nl2br that he will take care of putting the line break for you!!! rs

  • And @Maria, not to impose, but I would know to tell me, for when I click off the Popover it already close!?

  • 1

    Place data-trigger="focus" in the <button as in Jsfiddle: http://jsfiddle.net/rgLyumzL/

Show 4 more comments

Browser other questions tagged twitter-bootstrap

You are not signed in. Login or sign up in order to post.