CODEWITHSUNDEEP
javascriptjquerytooltiptitle
Kahlil N
Kahlil N

Reputation: 91

Carriage Return tooltip text in a title tag using JS

I have a simple JS function that outputs some results from a DB to a JS String. I then use the results from the function in a title tag, so that when you hover over a link you'll see a tool tip. And that all works, except I don't know why I'm not getting new line when I use 
? Am I missing something. Below is the code I'm using: 

      //loop through returned DB results and form string.  
      //use 
 to break line
     function getResults(id, state, dte){
      :
      :
      $.each(data.results, function(key, val) {  
        output = output + x + ". " + val.abr_month +": "+ val.result +" ("+val.point+")
";
        x = x + 1;
        //output = + output;
      });//end each
          return output;
          }//end function  

     result = getResults(id, state, dte);
     //return the HTML DOM object
     $('#'+id)[0].title=result;

The string I see being returned when I hover over the link is:
1. Apr: Result(45)&#xA2. May: Result (45)&#xA.

What I want to see is this:
1. Apr: Result (45)
2. May: Result (45)


if you can help in any way, that would be great
Note: I've removed the semi-colon for the purpose i've displayin the text &#Xa
I'm not using JQuery 1.9 so I can't use tooltip
Many thanks

Upvotes: 0

Views: 1205

Answers (1)

mplungjan
mplungjan

Reputation: 177885

Some browsers will allow 


Others will not let you format the tool tip unless you use jQuery UI tooltip or similar

Live demo

The demo is using jQuery 1.6.4 and jQuery UI v1.11.0pre just to let you see that jQuery and jQuery UI can have different versions

the dynamic part is found here:

jQuery Tooltip UI - trigger tooltip after x seconds

var titles = {
    "aprmay":"1. April: Result (49)<br/>2. May: Result (47)",
    "junjul":"1. June: Result (50)<br/>2. July: Result (42)"
}
$(function() {
    $(".result").each(function() {
        var title = this.title.replace(/; /g,"<br/>"); 
        $(this).tooltip({ "content": title });
    });

    // dynamic generate on hover 
    // https://stackoverflow.com/a/16523285/295783 

  $(document).tooltip({
    items: '.dynresult',
    show: 100,
    hide: 500,
    position: { my: 'center bottom', at: 'center top' },
    content: function( callback ) {
      var title = titles[this.id];
      callback( title ); 
    }
  });
});

function getTitles(obj) {
    return titles[obj.id];
}

using this HTML

<h3>Static titles</h3>
<a href="#" class="result" title="1. Apr: Result (45); 2. May: Result (45)">April/May</a>
<a href="#" class="result" title="1. June: Result (50); 2. July: Result (42)">June/July</a>
<hr/>
<h3>Dynamic titles</h3>
<a href="#" class="dynresult" title="" id="aprmay">April/May</a>
<a href="#" class="dynresult" title="" id="junjul">June/July</a>

Upvotes: 1

Related Questions