how to show tooltip using jquery

Question

I am using Knockout and WCF service. I get json data from service.

Requirement I get concatenated strings which i need to compare and show them in red color if there is some difference. I have achieved that with below code

var string1 = "DD,CC,FF";
var string2 = "DD,XX,FF";
var string1ColName ="id,name,address"
var string2ColName ="id,name,address"

var new_string = checkStrings(string1, string2);

document.body.innerHTML = new_string;

function checkStrings(str1, str2) {
str1 = Array.isArray(str1) ? str1 : str1.split(',');
str2 = Array.isArray(str2) ? str2 : str2.split(',');

for (var i = 0; i < str1.length; i++) {
          if (str1[i] !== str2[i] ){

              str1[i] = '<temp>' + str1[i] + '</temp>';
          }
      }
      return str1.join(',');

}

Here is fiddle

Now what i want is to show tooltip when i hover over text. So when i hover over text "CC" then it should corresponding column name. So in our case it will be "name".

How can i achieve it?

Answer 1

For a simple HTML tooltip do this

  var columnName = string2ColName.split(",");
  str1[i] = '<temp title="'+columnName[i]+'">' + str1[i] + '</temp>';

DEMO

---

For jQuery tooltip use this

  $(function() {
    $( document ).tooltip();
  });

DEMO