鼠标悬停工具提示，包含数据库中的数据

Question

我有一个项目，我从jQuery插件创建矩形（请参阅下面的代码），我可以在其中设置数据库的宽度/高度，颜色等。我想知道当我用数据库鼠标悬停这些矩形时，我是如何生成工具提示的，以及我设置颜色的数据（基于状态的颜色，我有下面这些颜色的逻辑）以及项目中的位置我可以这样做。

致以最诚挚的问候，

在javascript中创建的Rectangeles：

Plugin.prototype.createRect = function(firstPoint, width, height, text,
            colour) {
        var bottom = new Point(firstPoint.x + width, firstPoint.y + height);
        var top = new Point(firstPoint.x, firstPoint.y);
        var middle_point = this.get_xy_middle(top, bottom);
        var svg_root = this.element.find('#svg_root'+this.options.source);
        var rect = document.createElementNS(svgns, "rect");
        // alert("TEST inside firstPointX" + firstPoint.x);
        rect.setAttributeNS(null, "x", firstPoint.x);
        rect.setAttributeNS(null, "y", firstPoint.y);
        rect.setAttributeNS(null, "width", width);
        rect.setAttributeNS(null, "height", height);
        rect.setAttributeNS(null, "fill", colour);
        // alert("inside create Text " + text);
        var data = document.createTextNode(text);
        var text = document.createElementNS(svgns, "text");
        text.setAttributeNS(null, "x", firstPoint.x + width * 0.5);
        text.setAttributeNS(null, "y", middle_point.y);
        text.setAttributeNS(null, "font-size", this.text_size);
        text.setAttributeNS(null, "text-anchor", "middle");
        text.setAttributeNS(null, "fill", "black");
        text.appendChild(data);
        svg_root.append(rect);
        svg_root.append(text);


    };
    Plugin.prototype.click = function(e) {
        e.stopPropagation();
        e.preventDefault();

        var target = $(e.target).closest('rect, text');

        if (target.length == 1) {
            switch (target[0].nodeName.toLowerCase()) {
            case 'rect':
                var nodetext = $(target[0]).next();
                var _text = nodetext.text();
                _text = _text.replace(/\+/g, '%2B');
                newPopup2('link' + _text);

                break;
            case 'text':
                var _text = target.text();
                _text = _text.replace(/\+/g, '%2B');
                newPopup2('link' + _text);
                break;
            }
        }
};

java中矩形的颜色逻辑：

public void setColour(List<Status> statusar, List<Category> subcategories)
  {
    for (int index = 0; index < subcategories.size(); index++) {
      if (this.statusColor.compareToIgnoreCase("red") != 0)
      {
        if ((((Status)statusar.get(index)).getStatusColor().compareToIgnoreCase("green") == 0) && (this.priority < ((Category)subcategories.get(index)).getPriority()))
        {
          this.statusColor = "GREEN";
          this.priority = ((Category)subcategories.get(index)).getPriority();
        }
        if (((((Status)statusar.get(index)).getStatusColor().compareToIgnoreCase("red") == 0) && (((Category)subcategories.get(index)).getPriority() == 2)) || ((((Status)statusar.get(index)).getStatusColor().compareToIgnoreCase("yellow") == 0) && (this.priority <= ((Category)subcategories.get(index)).getPriority())) || ((((Status)statusar.get(index)).getStatusColor().compareToIgnoreCase("yellow") == 0) && (((Category)subcategories.get(index)).getPriority() == 3)))
        {
          this.statusColor = "YELLOW";
          this.priority = ((Category)subcategories.get(index)).getPriority();
        }
        if (((((Status)statusar.get(index)).getStatusColor().compareToIgnoreCase("red") == 0) && (((Category)subcategories.get(index)).getPriority() == 3)) || ((((Status)statusar.get(index)).getStatusColor().compareToIgnoreCase("red") == 0) && (this.priority <= ((Category)subcategories.get(index)).getPriority())))
        {
          this.statusColor = "RED";
          this.priority = ((Category)subcategories.get(index)).getPriority();
        }
      }
    }
  }

Ajax调用从服务器端获取数据：

function create(source) {
    $.ajax({
//      beforeSend: function() {
//           $('#main-container .loading').show();
//      },
        url : "List",
        type : "GET",
        dataType : "json",
        data : {
            source : source
        },
        success : function(response) {  
//          $('#main-container .loading').hide(); 
            var arrayBlock = [];
            var source1;
            for (var i = 0; i < response.length; i++) {

                var block = {};
                source1 = parseInt(response[i].source);
                block.level = parseInt(response[i].level, 10);
                block.width = parseFloat(response[i].width);
                block.position = parseInt(response[i].position, 10);

                block.name = response[i].superCategory.toString();
                block.colour = response[i].statusColor.toString(); // colour
                arrayBlock.push(block);
            }