How to make Twitter Bootstrap tooltips have multiple lines

Question

I am currently using the below function to create text that will be displayed using Bootstrap   s tooltip plugin  How come multiline tooltips only work with  lt br gt  and not  n  I prefer that there is not any HTML in my links    title attributes   What works  def tooltip object    tooltip        object each do  user      tooltip       user identifier       lt br gt     end   return tooltip end   What I want  def tooltip object     tooltip         object each do  user       tooltip       user identifier       n     end    return tooltip  end

User · Answer

If you are using Angular UI Bootstrap  you can use tooltip with html syntax  tooltip-html-unsafe  e g  update to angular 1 2 10  amp  angular-ui-bootstrap 0 11   http   jsfiddle net aX2vR 1   old one  http   jsfiddle net 8LMwz 1

User · Answer

The CSS solution for Angular Bootstrap is    ng-deep  tooltip-inner     white-space  pre-wrap      No need to use a parent element or class selector if you don t need to restrict it s use  Copy Pasta  and this rule will apply to all sub-components

User · Answer

You can use white-space pre-wrap on the tooltip  This will make the tooltip respect new lines  Lines will still wrap if they are longer than the default max-width of the container    tooltip-inner       white-space pre-wrap      http   jsfiddle net chad TSZSL 52   If you want to prevent text from wrapping  do the following instead    tooltip-inner       white-space pre      max-width none      http   jsfiddle net chad TSZSL 53   Neither of these will work with a  n in the html  they must actually be actual newlines  Alternatively  you can use encoded newlines  amp  013   but that s probably even less desirable than using  lt br gt  s

User · Answer

In Angular UI Bootstrap 0 13 X  tooltip-html-unsafe has been deprecated  You should now use tooltip-html and  sce trustAsHtml   to accomplish a tooltip with html   https   github com angular-ui bootstrap commit e31fcf0fcb06580064d1e6375dbedb69f1c95f25   lt a href     tooltip-html  htmlTooltip  gt Check me out  lt  a gt    scope htmlTooltip    sce trustAsHtml  I  ve been made  lt b gt bold lt  b gt

User · Answer

If you re using Twitter Bootstrap Tooltip on non-link element  you can specify  that you want a multi-line tooltip directly in HTML code  without Javascript  using just the data parameter    lt span rel  tooltip  data-html  true  data-original-title  1 lt br   gt 2 lt br   gt 3  gt 5 lt  span gt    This is just an alternative version of costales  answer  All the glory goes to him

User · Answer

You can use the html property  http   jsfiddle net UBr6c   My  lt a href     title  This is a lt br   gt test    lt br   gt or not  class  my tooltip  gt Tooltip lt  a gt  test       my tooltip   tooltip  html  true

[javascript] How to make Twitter Bootstrap tooltips have multiple lines?

Examples related to javascript

Examples related to html

Examples related to css

Examples related to twitter-bootstrap