How do you change the width and height of Twitter Bootstrap s tooltips

Question

I created a tooltip using Twitter Bootstrap   The tooltip is displaying with three lines  However  I would like to display the tooltip with only one line   How do I change the width of the tooltip  Is this specific to Twitter Bootstrap or to tooltips themselves

User · Answer

With Bootstrap 4 I use  tooltip-inner       margin-left  50       max-width  50       width  50       min-width  300px

User · Answer

On Bootstrap 4  and if you don t want to change all tooltips width  you can use specific template for the tooltip you want     lt a href   link  class  btn btn-info     data-toggle  tooltip     data-placement  bottom     data-template   lt div class  tooltip  role  tooltip  gt  lt div class  arrow  gt  lt  div gt  lt div class  tooltip-inner  style  max-width  400px   gt  lt  div gt  lt  div gt      title  This is a long message displayed on 400px width tooltip     gt      My button label  lt  a gt

User · Answer

I needed to adjust the width of some tooltips  But not an overall setting  So I ended up doing this   CSS   large-tooltip  tooltip-inner       max-width  300px     media screen and  max-width  300px       large-tooltip  tooltip-inner       max-width  100           JQuery      data-toggle  tooltip          tooltip        on  shown bs tooltip   function e                           If the item that triggered the event has class  large-tooltip             then also add it to the currently open tooltip                     if    this  hasClass  large-tooltip                     body   find   tooltip role  tooltip   show   addClass  large-tooltip                        Html   lt img src   theimage jpg  class  large-tooltip  data-toggle  tooltip  data-html  true  title  Lorem ipsum dolor sit amet  consectetur adipiscing elit  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua  Ut enim ad minim veniam  quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat  Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur  Excepteur sint occaecat cupidatat non proident  sunt in culpa qui officia deserunt mollit anim id est laborum     gt

User · Answer

Please refer the below post  cmcculloh s answer worked for me  https   stackoverflow com posts 31683500 edit  As hinted at in the documentation  the easiest way to ensure that your tooltip does not wrap at all is to use   tooltip-inner       max-width  none      white-space  nowrap      With this  you don t have to worry about dimension values or anything like that  Main problem being if you have a super long line of text it will just go off of the screen  as you can see in the JSBin Example

User · Answer

On BS3   tooltip-inner       min-width  150px     the minimum width

User · Answer

after some experimenting  this worked best for me    tooltip-inner       max-width  350px     set this to your maximum fitting width        width  inherit     will take up least amount of space

User · Answer

in bootstrap 3 0 3 you can do it by modifying the popover class   popover       min-width  200px      max-width  400px

User · Answer

Another solution  create a new class  e g  tooltip-wide  in CSS    tooltip-wide    tooltip  gt   tooltip-inner        max-width  100       Use this class on elements where you want wide tooltips    lt div class  tooltip-wide  data-toggle  tooltip  title  I am a long tooltip  gt Long tooltip lt  div gt    Bootstrap tooltip generates markup below the element containing the tooltip  so the HTML actually looks something like this after the markup is generated    lt div class  tooltip-wide  data-toggle  tooltip  title  I am a long tooltip  gt Long tooltip lt  div gt   lt div class  tooltip  role  tooltip  gt       lt div class  tooltip-arrow  gt  lt  div gt       lt div class  tooltip-inner  gt I am a long tooltip lt  div gt   lt  div gt    The CSS uses this to access the adjacent element     to  tooltip-wide  and from there navigates to  tooltip-inner  before applying the max-width attribute  This will only affect elements using the  tooltip-wide class  all other tooltips will remain unaltered

User · Answer

I had the same problem  however all popular answers - to change  tooltip-inner width  for my task failed to do the job right  As for other  i e  shorter  tooltips fixed width was too big  I was lazy to write separate html templates classes for zilions of tooltips  so I just replaced all spaces between words with  amp nbsp  in each text line

User · Answer

Set the class to the main tooltip div and for the inner tooltip  div tooltip       width  270px     div tooltip-inner       max-width  280px

User · Answer

You may edit the  tooltip-inner css class in bootstrap css   The default max-width is 200px   You may change the max-width to your desired size

User · Answer

Mine where all variable lengths and a set max width would not work for me so setting my css to 100  worked like a charm    tooltip-inner       max-width  100

User · Answer

To fix the width problem  use the following code instead      input rel  txtTooltip     tooltip       container   body        example  http   eureka ykyuen info 2014 10 08 bootstrap-3-tooltip-width

User · Answer

Try this code    tooltip-inner        max-width 350px  important

User · Answer

I realize this is a very old question  but if I landed here  so will others  So I figured I weigh in    If you want the tooltip to be responsive to one line only regardless of how much content you add to it  the width has to be flexible  However  Bootstrap does initiate the tooltip to a width  so you have to at least declare what that width will be and make it flexible from that size on up  This is what I recommend    tooltip-inner       min-width  100px      max-width  100        The min-width declares a starting size  As opposed to the max-width  as some other would suggest  which it declares a stopping width  According to your question  you shouldn t declare a final width or your tooltip content will eventually wrap at that point  Instead  you use an infinite width or flexible width  max-width  100   will ensure that once the tooltip has initiated at 100px wide  it will grow and adjust to your content regardless of the amount of content you have in it   KEEP IN MIND Tooltips are not intended to carry a lot of content  It could look funky if you had a long string across the entire screen  And it will definitely will have an impact in your responsive views  specially smartphone  320px width     I would recommend two solutions to perfect this    Keep your tooltip content to a minimum so as to not exceed 320px wide  And even if you do this you must remember if you have the tooltip placed at the right of the screen and with data-placement right  your tooltip content will not be visible in smartphones  hence why bootstrap initially designed them to be responsive to its content and allow it to wrap  If you are hellbent on using this one line tooltip concept  then cover your six by using a  media query to reset your tooltip to fit the smartphone view  Like this    My demo HERE demonstrates the flexibility and responsiveness on the tooltips according to content size and device display size as well   media  max-width  320px         tooltip-inner            min-width  initial           width  320px

User · Answer

Define the max-width with  important   and use data-container  body   CSS file   tooltip-inner       max-width  500px  important      HTML tag   lt a data-container  body  title  Looooooooooooooooooooooooooooooooooooooong Message  href     class  tooltiplink  data-toggle  tooltip  data-placement  bottom  data-html  true  gt  lt i class  glyphicon glyphicon-info-sign  gt  lt  i gt  lt  a gt    JS script      tooltiplink   tooltip

User · Answer

Just override the default max-width to whatever fits your needs    tooltip-inner     max-width  350px      When max-width doesn t work  option 1   If max-width does not work  you could use a set width instead  This is fine  but your tooltips will no longer resize to fit the text  If you don t like that  skip to option 2    tooltip-inner     width  350px      Correctly dealing with small containers  option 2   Since Bootstrap appends the tooltip as a sibling of the target  it is constrained by the containing element  If the containing element is smaller than your max-width  then max-width won t work   So  when max-width doesn t work  you just need to change the container    lt div class  some-small-element  gt     lt a data-container  body  href     title  Your boxed-in tooltip text  gt   lt  div gt    Pro Tip  the container can be any selector  which is nice when you only want to override styles on a few tooltips

User · Answer

Setting the max-width of class tooltip-inner didn  t work for me  I  m using bootstrap 3 2  Some how setting max-width only work if you set the width of parent class   tooltip    But then all tooltips become the size you specify  So here  s my solution   add a Width to the parent class    tooltip     width 400px      Then you add the max-width and change the display to inline-block  so it will not occupy the entire space    tooltip-inner     max-width   tooltip-max-width    display inline-block

User · Answer

BS3    tooltip-inner   width 400px  max-width  400px

User · Answer

Just override bootstrap css  The default value in BS2 is max-width 200px  So you can increase it with whatever fits your needs    tooltip-inner       max-width  350px         If max-width does not work  try using width instead        width  350px

User · Answer

You should overwrite the properties using your own css   like so   div tooltip-inner       text-align  center      -webkit-border-radius  0px      -moz-border-radius  0px      border-radius  0px      margin-bottom  6px      background-color   505050      font-size  14px      the selector choose the div that the tooltip is held  tooltip is added in by javascript and it usually does not belong to any container

[twitter-bootstrap] How do you change the width and height of Twitter Bootstrap's tooltips?

Examples related to twitter-bootstrap

Examples related to tooltip