Changing the width of Bootstrap popover

Question

I am designing a page using Bootstrap 3  I am trying to use a popover with placement  right on an input element  The new Bootstrap ensures that if you use form-control you basically have a full-width input element   The HTML code looks something like this     lt div class  row  gt       lt div class  col-md-6  gt           lt label for  name  gt Name  lt  label gt           lt input id  name  class  form-control  type  text                            data-toggle  popover  data-trigger  hover                            data-content  My popover content My popover content My popover content My popover content     gt       lt  div gt   lt  div gt    The popovers width is too low  in my opinion because their isn t any width left in the div  I want the input form on the left side  and a wide popover on the right side   Mostly  I m looking for a solution where I don t have to override Bootstrap    The attached JsFiddle  The second input option  Haven t used jsfiddle a lot so don t know  but try increasing the size of the output box to see results  on smaller screens wouldn t even see it  http   jsfiddle net Rqx8T

User · Answer

In bootstrap 4 you can simply override default value of bootstrap variable $popover-max-width in your styles.scss file like so:

$popover-max-width: 300px;

@import "node_modules/bootstrap/scss/functions";
@import "node_modules/bootstrap/scss/variables";
@import "node_modules/bootstrap/scss/mixins";
@import "node_modules/bootstrap/scss/popover";

More on overriding bootstrap 4 defaults https://getbootstrap.com/docs/4.0/getting-started/theming/#variable-defaults

User · Answer

Increase width with CSS You can use CSS to increase the width of your popover  like so     The max width is dependant on the container  more info below      popover      max-width  100      Max Width of the popover  depending on the container         If this doesn t work  you probably want the solution below and alter your container element   View the JSFiddle   Twitter bootstrap Container If that doesn t work  you probably need to specify the container     Contain the popover within the body NOT the element it was called in      data-toggle  quot popover quot     popover       container   body        More Info  The popover is contained within the element that it is triggered in  In order to extend it  quot full width quot  - specify the container     Contain the popover within the body NOT the element it was called in      data-toggle  quot popover quot     popover       container   body        JSFiddle View the JSFiddle to try it out  JSFiddle  http   jsfiddle net xp1369g4

User · Answer

I used this working fine      popover     background-color  b94a48     border none     border-radius unset     min-width 100px     width 100      max-width 400px     overflow-wrap break-word

User · Answer

No final solution here    Just some thoughts how to  cleanly  solve this problem     Updated version  jQuery 1 11   Bootstrap 3 1 1   class  col-xs-  instead of class  col-md-   of your original JSFiddle  http   jsfiddle net tkrotoff N99h7   Now the same JSFiddle with your proposed solution  http   jsfiddle net tkrotoff N99h7 8  It does not work  the popover is positioned relative to the  lt div class  col-   gt    imagine you have multiple inputs for the same  lt div class  col-   gt      So if we want to keep the popover on the inputs  semantically better      popover   position  fixed     but then each time you scroll the page  the popover will not follow the scroll  popover   width  100      not that good since you still depend on the parent width  i e  lt div class  col-   gt   popover-content   white-space  nowrap     good only if the text inside the popover is shorter than max-width   See http   jsfiddle net tkrotoff N99h7 11   Maybe  using very recent browsers  the new CSS width values can solve the problem  I didn t try

User · Answer

Here s the non-coffeescript way of doing it with hover       product-search-trigger   popover       trigger   hover       container   body       html  true      placement   left       on  show bs popover   function         return   this  data  bs popover   tip   css         maxWidth   300px

User · Answer

With the help of what  EML has described above regarding popover on modal windows and also the code shown by  2called-chaos  this is how I solved the problem   I have a icon on the modal which when clicked should the popup  My HTML   lt i title    class  glyphicon glyphicon-info-sign  rel  popover  data-title  Several Lines  data-content  A - First line lt br   gt B - Second line - Long line  lt br   gt C - Third Line - Long Long Long Line  gt  lt  i gt    My Script          rel popover    popover           placement   bottom           html   true           container    name-of-modal-window  modal-body         on  show bs popover   function        this  data  bs popover   tip   css  max-width    600px

User · Answer

For a typescript component    Component       selector   your-component       templateUrl   your-template component html       styles              host  gt  gt  gt   popover             max-width  100

User · Answer

To change the popover width you may override the template       name   popover       template    lt div class  popover  role  tooltip  style  width  500px   gt  lt div class  arrow  gt  lt  div gt  lt h3 class  popover-title  gt  lt  h3 gt  lt div class  popover-content  gt  lt div class  data-content  gt  lt  div gt  lt  div gt  lt  div gt

User · Answer

You can adjust the width of the popover with methods indicated above  but the best thing to do is to define the width of the content before Bootstrap sees is and does its math   For instance  I had a table  I defined it s width  then bootstrap built a popover to suit it    Sometimes Bootstrap has trouble determining the width  and you need to step in and hold its hand

User · Answer

To change width you can use css  For fixed size wanted   popover      width 200px      height 250px          For max width wanted    popover      max-width 200px      height 250px          jsfiddle  http   jsfiddle net Rqx8T 2

User · Answer

You can use attribute data-container  body  within popover   lt i class  fa fa-info-circle  data-container  body  data-toggle  popover     data-placement  right  data-trigger  hover  title  Title     data-content  Your content  gt  lt  i gt

User · Answer

I also needed a wider popover for a search text field  I came up with this Javascript solution  here in Coffee        product-search-trigger      click - gt  false    cancel click on  lt a gt  tag    popover     container   body      html  true     placement   left      title    lt strong gt Product search lt  strong gt  enter number or name     on  show bs popover   - gt    this  data  bs popover   tip   css maxWidth   600px      The workaround is in the last line  Before the popover is being displayed the max-width option is set to a custom value  You could also add a custom class to the tip element

User · Answer

Try this   var popover size      popover   css  width     var string  popover size  split  px    alert  string  string   popover size     parseInt string 0   350    alert  ps  popover size       popover   css  width  parseInt popover size

User · Answer

You can change the template of your popover  Either with the data-template-attribute or with the relevant part in the function that sets it up    x000D   x000D   lt html gt  x000D     lt head gt  x000D       lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D         lt  -- Latest compiled and minified CSS -- gt  x000D         lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 7 css bootstrap min css  integrity  sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va PmSTsz K68vbdEjh4u  crossorigin  anonymous  gt  x000D   x000D         lt  -- Latest compiled and minified JavaScript -- gt  x000D         lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 7 js bootstrap min js  integrity  sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa  crossorigin  anonymous  gt  lt  script gt  x000D     lt  head gt  x000D     lt body gt  x000D       lt span class  text-green  data-toggle  popover  data-placement  right  data-template   lt div class  amp quot popover fade top in amp quot  style  amp quot max-width none  amp quot  role  amp quot tooltip amp quot  gt  lt div class  amp quot arrow amp quot  gt  lt  div gt  lt h3 class  amp quot popover-title amp quot  gt  lt  h3 gt  lt div class  amp quot popover-content amp quot  gt  lt  div gt  lt  div gt   data-trigger  manual  data-original-title  Some Title  data-content   lt div gt Some really long text and stuff  Some really long text and stuff  Some really long text and stuff  Some really long text and stuff  lt  div gt   data-html  true  onclick    this  popover  show     gt clickme lt  span gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

lt div class  row  data-toggle  popover  data-trigger  hover                    data-content  My popover content My popover content My popover content My popover content   gt   lt div class  col-md-6  gt       lt label for  name  gt Name  lt  label gt       lt input id  name  class  form-control  type  text    gt   lt  div gt   lt  div gt    Basically i put the popover code in the row div  instead of the input div  Solved the problem

User · Answer

container   body  normally does the trick  see JustAnil s answer above   but there s a problem if your popover is in a modal  The z-index places it behind the modal when the popover s attached to body  This seems to be related to BS2 issue 5014  but I m getting it on 3 1 1  You re not meant to use a container of body  but if you fix the code to          fubar   popover      trigger    hover      html      true     dataContainer     modal-body         etc       then you fix the z-index problem  but the popover width is still wrong   The only fix I can find is to use container   body  and to add some extra css    popover      max-width   400px    z-index     1060      Note that css solutions by themselves won t work

User · Answer

lt label id  txtLbl  gt Overview lt  label gt   lt a tabindex  0  class  btn btn-default  role  button  data-toggle  popover   data-placement  right  id  Pops   gt  lt  a gt     lt div id  popover-content  class  hide  gt     lt div class  popovermenu  gt          Your content                       lt  div gt    lt  div gt    I end up by setting div  popover-content  width to the number I want   other ids   or class won t work       Good luck       popover-content        width  600px

User · Answer

I had the same problem  Spent quite some time searching for an answer and found my own solution  Add following text to the head     lt style type  text css  gt       popover          max-width 600px         lt  style gt

User · Answer

you can also add the data-container  body  which should do the job      lt div class  row  gt       lt div class  col-md-6  gt           lt label for  name  gt Name  lt  label gt           lt input id  name  class  form-control  type  text                            data-toggle  popover  data-trigger  hover                            data-container  body                            data-content  My popover content My popover content My popover content My popover content     gt       lt  div gt   lt  div gt

User · Answer

For people who prefer the JavaScript solution  In Bootstrap 4 tip   became getTipElement   and it returns a no jQuery object  So in order to change the width of the popover in Bootstrap 4 you can use      on  show bs popover   function             this  data  bs popover   getTipElement    css  max-width    405px

User · Answer

One tested solution for Bootstrap 4 beta    popover           min-width  30em  important          Together with the jQuery statement       data-toggle  popover     popover         container   body         trigger   focus         html  true        placement   top           Side-note  data-container  body  or container   body  in either HTML or as an option to the popover     object didn t really do the trick  maybe the do work but only together with the CSS statement    Also  remember that Bootstrap 4 beta relies on popper js for its popover and tooltip positioning  prior to that it was tether js

User · Answer

On Bootstrap 4  you can easily review the template option  by overriding the max-width        myButton   popover       placement   bottom       html  true      trigger   click       template    lt div class  popover  style  max-width  500px   role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt h3 class  popover-header  gt  lt  h3 gt  lt div class  popover-body  gt  lt  div gt  lt  div gt         This is a good solution if you have several popovers on page

User · Answer

In Angular ng-bootstrap you can simply container  body  to the control that triggers popover  such as button or textbox   Then in your global styleing file  style css or style scss  file you must add  popover   max-width  100   important     After that  the content of the popover will automatically set to its content width

[css] Changing the width of Bootstrap popover

Examples related to css

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to popover