Clever Geek Handbook

How to auto-resist a popover

Here is my violin. http://jsfiddle.net/sNrLQ/1/

I want the pop-out to be automatically dependent on its content. Also I am trying to give it a max width of 400px.

My css

.popover2{display:block!important;width: 400px !important;}

And my html

<div class="popover popover2 left"><div class="arrow"></div><div class="popover-content"><p>tellus. Donec dui tortor, commodo nec laoreet ac, </p></div></div>
+3


source to share


4 answers


DEMO

try it

CSS



.popover2{
    display:block !important;
    max-width: 400px!important;
    width:auto;
}

Hope this helps, thanks

+6


source


use the min-height

max-h css property andoverflow:auto



and generally if you are using twitter bootstrap auto resizing is already taken care of, cross browser :)

+1


source


You are most configuring the max width inside boostrap.min.css. The information is automatically resized to the maximum width preset in the file.

0


source


I hope this is helpful

var $btn = $("#my_btn")
  .popover()
  .on("show.bs.popover", function(e){
    p.data("bs.popover").tip().css({"max-width": "500px"});
  });
Run codeHide result


0


source






More articles:


All Articles