Add line break within tooltips

Question

How can line breaks be added within a HTML tooltip   I tried using  lt br  gt  and  n within the tooltip as follows     lt a href     title  Some long text  lt br  gt  Second line text  n Third line text  gt Hover me lt  a gt    However  this was useless and I could see the literal text  lt br  gt  and  n within the tooltip  Any suggestions will be helpful

User · Answer

Well if you are using Jquery Tooltip utility  then in  jquery-ui js  Javascript file find following text   tooltip find   ui-tooltip-content   html content     and put above that  content content replace    amp lt  g   lt    replace    amp gt  g   gt       I hope this will also work for you

User · Answer

Use    amp  013     There shouldn t be any   character

User · Answer

Just use the entity code  amp  xA  for a linebreak in a title attribute    x000D   x000D   lt a title  First Line  amp  xA Second Line  gt Hover Me  lt  a gt  x000D   x000D   x000D

User · Answer

Give  n between the text  It work on all browsers   Example  img tooltip    Your Text    n  img tooltip      Your text  n     This will work for me and it s used in code behind   Hope this will work for you

User · Answer

Just add data-html  true    lt a href     title  Some long text  lt br  gt  Second line text  n Third line text  data-html  true  gt Hover me lt  a gt

User · Answer

AngularJS with Bootstrap UI Tolltip  uib-tooltip   has three versions of tool-tip    uib-tooltip  uib-tooltip-template and uib-tooltip-html  - uib-tooltip takes only text and will escape any HTML provided - uib-tooltip-html takes an expression that evaluates to an HTML string - uib-tooltip-template takes a text that specifies the location of the template   In my case  I opted for uib-tooltip-html and there are three parts to it    configuration controller HTML   Example    function angular       Step 1  configure  sceProvider - this allows the configuration of  sce service   angular module  myApp     uib bootstrap            config function  sceProvider                sceProvider enabled false                 Step 2  Set the tooltip content in the controller  angular module  myApp           controller  myController   myController    myController  inject      sce     function myController  sce        var vm   this      vm tooltipContent    sce trustAsHtml  I am the first line  lt br   gt  lt br   gt                                               I am the second line-break         return vm         window angular      Step 3  Use the tooltip in HTML  UI    lt div ng-controller  myController as get  gt        lt span uib-tooltip-html  get tooltipContent  gt other Contents lt  span gt   lt  div gt    For more information  please check here

User · Answer

Just use the entity code  amp  013  for a linebreak in a title attribute

User · Answer

So if you are using bootstrap4 then this will work    lt style gt      tooltip-inner       white-space  pre-wrap         lt  style gt    lt script gt         function                data-toggle  tooltip     tooltip           lt  script gt    lt a data-toggle  tooltip  data-placement  auto  title   first line  amp  010  next line  href     gt  Hover me  lt  a gt    If you are using in Django project then we can also display dynamic data in tooltips like    lt a class  black-text pb-2 pt-1  data-toggle  tooltip  data-placement  auto   title     post location     amp  010     post updated on     href      url  blog get user profile  post author id     gt    post author    lt  a gt

User · Answer

Using  html   instead of  text   worked for me  For example   html  This is a first line       lt br  gt      This is a second line

User · Answer

For me  a 2-step solution  combination of formatting the title and adding the style  worked  as follows   1  Format the title attrbiute    lt a ref     title  First Line                   Second Line                   Third line  gt Hover Me lt  a gt    2  Add this style to the tips element   white-space  pre-line    Tested in IE8  Firefox 22  and Safari 5 1 7

User · Answer

I found it  It can be done by simply doing like this   lt a ref     title  First Line                   Second Line                   Third line  gt Hover Me lt  a gt

User · Answer

Just add a data attribute     data-html  true     and you re good to go   Eg  usage     lt i data-html  true  class  tooltip ficon-help-icon  twipsy-content-set  true  data-original-title    lt b gt Hello lt  b gt  Stackoverflow   lt  i gt    It has worked in majority of the tooltip plugins i have tried as of now

User · Answer

The  amp  013  combined with the style white-space  pre-line  worked for me

User · Answer

The solution for me was http   jqueryui com tooltip     And here the code  the part of script that make  lt br  gt  Works  is  content      HTML HEAD   lt head runat  server  gt       lt script src     Scripts jquery-2 0 3 min js  gt  lt  script gt       lt link href  Content themes base jquery-ui css  rel  stylesheet    gt       lt script src     Scripts jquery-ui-1 10 3 min js  gt  lt  script gt   lt script gt        Position        my   gt   at       at   gt  element         function                document  tooltip               content  function                     var element      this                    if   element is    title                             return element attr   title                                                   position    my   left bottom-3   at   center top                 lt  script gt   lt  head gt    ASPX or HTML control   lt asp TextBox ID  Establecimiento  runat  server  Font-Size  1 3em  placeholder  Establecimiento  title  Texto 1  lt br  gt TIP  texto 2  gt  lt  asp TextBox gt    Hope this help someone

User · Answer

n   with the styling   tooltip-inner       white-space  pre-line      worked for me

User · Answer

amp lt br   amp gt  did work if you are using qTip

User · Answer

This CSS is what finally worked for me in conjunction with a linefeed in my editor    tooltip-inner       white-space  pre-wrap      Found here  How to make Twitter bootstrap tooltips have multiple lines

User · Answer

Just add this code snippet in your script         function                  data-toggle  tooltip     tooltip             and ofcourse as mentioned in above answers the data-html should be  true   This will allow you to use html tags and formatting inside the value of title attribute

User · Answer

You can use bootstrap tooltip  and don t forget to set the html option to true    lt div id  tool  gt  tooltip lt  div gt        tool   tooltip        title   line one     lt br   gt     line two        html  true        lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 3 6 css bootstrap min css  gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 6 js bootstrap min js  gt  lt  script gt

User · Answer

just use  n in title and add this css   tooltip-inner       white-space  pre-wrap

User · Answer

The javascript version Since  amp  013   html  is 0D  hex   this can be represented as   u000d  str   str replace   n g    u000d     In addition  Sharing with you guys an AngularJS filter that replaces  n with that character thanks to the references in the other answers app filter  titleLineBreaker   function          return function  str            if   str                return str                     return str replace   n g    u000d                usage  lt div title  quot    message   titleLineBreaker    quot  gt   lt  div gt

User · Answer

Hi this code will work in all browser   i used   013   010  for new line in chrome and safari and ul li for IE    function genarateMultiLIneCode            var  values  a   b   c            const liStart     lt li gt                  const liEnd     lt  li gt                  const bullet     amp  8226                        var mergedString                      const unOrderListStart   lt ul gt                 const unOrderListEnd   lt  ul gt                 const fakeNewline     amp  013  amp  010                  for  let i   0  i  lt  values length  i                         mergedString    liStart   bullet   values i    liEnd   fakeNewline                                const tempElement   document createElement  div                  tempElement innerHTML   unOrderListStart   mergedString   unOrderListEnd                    return tempElement innerText

User · Answer

This css will help you        tooltip         word-break  break-all         or if you want in one line       tooltip-inner         max-width  100

User · Answer

if you are using jquery-ui 1 11 4   var tooltip     widget   ui tooltip         version   1 11 4       options            content  function                    support  IE lt 9  Opera in jQuery  lt 1 7                 text   can t accept undefined  so coerce to a string             var title      this   attr   title                          Escape title  since we re going from an attribute to raw HTML Replace-- gt     return      lt a gt     text  title   html    by -- gt       return      lt a gt     html  title

User · Answer

use  amp  13  should work  I ve tested in Chrome  Firefox and Edge     x000D   x000D  let users     username   user1     username   user2     username   user3     x000D  let favTitle       x000D  for let j   0  j  lt  users length  j    x000D      favTitle    users j  username     amp  13    x000D   x000D      item   append   lt i title  In favorite users   amp  13     favTitle      gt Favorite lt  i gt     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div id   item gt  lt  div gt  x000D   x000D   x000D

User · Answer

Grater than Jquery UI 1 10 is not support to use html tag inside of the title attribute because its not valid html   So the alternative solution is to use tooltip content option  Refer - http   api jqueryui com tooltip  option-content

User · Answer

it is possible to add linebreaks within native HTML tooltips by simply having the title attribute spread over mutliple lines   However  I d recommend using a jQuery tooltip plugin such as Q-Tip  http   craigsworks com projects qtip    It is simple to set up and use  Alternatively there are a lot of free javascript tooltip plugins around too   edit  correction on first statement

[html] Add line break within tooltips

Examples related to html

Examples related to tooltip

Examples related to newline