CODEWITHSUNDEEP
javascripthtmlangulartooltip
forgottofly
forgottofly

Reputation: 2717

Break HTML tooltip message using line breaks

I'm trying to break my custom HTML tooltip that I used inside the button Hover Button. I tried using different approach(ie., /n, &#013) in typescript as it's a custom tooltip to add a line break and nothing seem to work.

Below is the tooltip data that I'm using and the fiddle associated with the same:

 tooltipData="Helo,Angular 2" + "&#013" + "This button is used to test hover message" + "/n" + "This message should come at the last"

Fiddle

Upvotes: 0

Views: 5790

Answers (5)

user10921653
user10921653

Reputation: 

    var =values["RAHUL","BIKASH","RAMAN"];
const liStart = '<li>';
      const liEnd = '</li>';
      const bullet = '&#8226; ';     
      var mergedString = ' ';
      const unOrderListStart='<ul>'
      const unOrderListEnd='</ul>'
      const fakeNewline = '&#013;&#010;';
      for (let i = 0; i < values.length; i++) {
           mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
      }
      const tempElement = document.createElement("div");
      tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;

then use tempElement.innerText

Upvotes: 0

abhinavsinghvirsen
abhinavsinghvirsen

Reputation: 2014

Hi this code will work in all browser !!i used for new line in chrome and safari and ul li for IE 

function genarateMultiLIneCode(){
var =values["a","b","c"];
const liStart = '<li>';
      const liEnd = '</li>';
      const bullet = '&#8226; ';     
      var mergedString = ' ';
      const unOrderListStart='<ul>'
      const unOrderListEnd='</ul>'
      const fakeNewline = '&#013;&#010;';
      for (let i = 0; i < values.length; i++) {
           mergedString += liStart + bullet + values[i] + liEnd + fakeNewline;
      }
      const tempElement = document.createElement("div");
      tempElement.innerHTML = unOrderListStart + mergedString + unOrderListEnd;    
      return tempElement.innerText;
    }
}

Upvotes: 1

Pardeep Jain
Pardeep Jain

Reputation: 86730

Try this -

<div title="Helo,Angular 2&#013;&#010;This button is used to test hover message&#009;This message should come at the last">Hover Me</div>

Here I used - 

&#010; - for New line

I Hope this will work for you.

Upvotes: 4

ChrisNaylor94
ChrisNaylor94

Reputation: 131

Update your fiddle to use \n rather than /n.

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44087

You're using the wrong slash - new line should be \n not /n:

tooltipData="Helo,Angular 2" + "&#013" + "This button is used to test hover message" + "\n" + "This message should come at the last"

Upvotes: 1

Related Questions