如何使用jquery显示工具提示

时间:2013-08-29 11:05:34

标签: javascript jquery css

我正在使用Knockout和WCF服务。我从服务中获取json数据。

要求 如果存在一些差异,我会得到我需要比较的连接字符串并以红色显示它们。我用下面的代码

实现了这个目标
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(',');

}

这是fiddle

现在我想要的是当我将鼠标悬停在文本上时显示工具提示。因此,当我将鼠标悬停在文本“CC”上时,它应该对应列名。所以在我们的例子中它将是“名字”。

我怎样才能实现它?

1 个答案:

答案 0 :(得分:1)

对于简单的HTML工具提示,请执行此操作

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

DEMO


对于jQuery工具提示,请使用此

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

DEMO