Question

我的表格看起来像下面的结构。

bower install ngmaps
...
{
  "level": "action",
  "id": "validate",
  "message": "0.1.0 against git://github.com/monospaced/bower-qrcode-generator.git#v0.1.0",
  "data": {
    "endpoint": {
      "name": "qrcode-generator",
      "source": "git://github.com/monospaced/bower-qrcode-generator.git",
      "target": "v0.1.0"
    },
    "resolver": {
      "name": "qrcode-generator",
      "source": "git://github.com/monospaced/bower-qrcode-generator.git",
      "target": "v0.1.0"
    },
    "canonicalDir": "/root/.cache/bower/packages/66daec2cebc85c0406043bff1212efc1/0.1.0",
    "pkgMeta": {
      "name": "qrcode-generator",
      "version": "0.1.0",
      "main": [
        "js/qrcode.js",
        "js/qrcode_UTF8.js"
      ],
      "ignore": [
        "**/.*",
        "node_modules",
        "components"
      ],
      "homepage": "https://github.com/monospaced/bower-qrcode-generator",
      "_release": "0.1.0",
      "_resolution": {
        "type": "version",
        "tag": "v0.1.0",
        "commit": "64e898f180fbd76aa2740be41124d219aa735f0c"
      },
      "_source": "git://github.com/monospaced/bower-qrcode-generator.git",
      "_target": "v0.1.0"
    }
  }
}
...
, {
  "type": "input",
  "message": "Answer",
  "name": "prompt",
  "level": "prompt"
}

我已经创建了示例示例，在用户ID悬停时，我正在获取用户信息，我需要在工具提示中显示，我需要一个样式化的工具提示，看起来像数据放置顶部的bootstrap工具提示。请参阅此示例和TryHere

如果你在控制台中看到我正在获取悬停用户的数据，我只需要像工具提示一样显示这些数据，并且在悬停时我需要隐藏。请检查小提琴并打开控制台。你会得到的。问我是否缺少任何信息。

这是JS代码

user_id  Payment_status
1          Pending
2          Success
3          Failed

Html代码

var orders=[
{id: 1, first_name: "Sud", last_name: "D", phone: "45687889", email: "sud@peace.org"},
{id: 2, first_name: "Mat", last_name: "D", phone: "123456789", email: "mat@peace.org"},
{id: 3, first_name: "Suraj", last_name: "D", phone: "321145789", email: "suraj@peace.org"}
];

$('.user_id').hover(function(){
console.log('hi'+$(this).text());
var current_id=$(this).text();
                for (var i =0;i<=orders.length - 1; i++) {
                    if (orders[i].id==current_id) {
                        console.log('hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'+orders[i].email);
                    };
                };
})

Answer 1

如果您将此行添加到您的javascript中，则可以看到工具提示

 $('.user_id').hover(function(){
console.log('hi'+$(this).text());
var current_id=$(this).text();
                for (var i =0;i<=orders.length - 1; i++) {
                    if (orders[i].id==current_id) {
                                  console.log('hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'+orders[i].email);
                     $(this).attr('title','hi'+orders[i].first_name+'<br>'+orders[i].last_name+'<br>'      +orders[i].email);
                    };
                };
})

Answer 2

我使用此工具提示代码：

function ExtractorTooltip() {
    //**  Tooltip Class  **//

    this.tooltip = null;
    this.tooltipTextContainer = null;

}
ExtractorTooltip.prototype = {


    initToolTip: function(_id, _width, _height, _position, _backgroundColor, _borderRadious, _textColor, _fontFamily, _fontSize, _margin, _padding) {
        //Create div element

        this.tooltip = $('<div></div>').attr('id', _id).css({
            width: _width,
            height: _height,
            position: _position,
            background: _backgroundColor,
            borderRadius: _borderRadious + 'px',
            MozBorderRadius: _borderRadious + 'px',
            margin: _margin + 'px',
            padding: _padding + 'px',
            'z-index': 2147483600
        }).appendTo('body');

        this.tooltipTextContainer = $('<span></span>').css({
            fontFamily: _fontFamily.toString(),
            fontSize: _fontSize + 'px',
            color: _textColor
        }).appendTo(this.tooltip);        

        this.hide();
    },
    addTooltipTo: function(_container) {
var self=this;
                  _container.addEventListener('mouseover', function(event) {
                this.show(event.target.getAttribute('filter'));

            $(document).on('mousemove.tooltip', function(ev) {
                self.tooltip.css({
                    left: ev.pageX + 'px',
                    top: ev.pageY + 'px'
                });

            });
        }.bind(this), false);

        _container.addEventListener('mouseout', function(event) {
            this.hide();          
            $(document).off('mousemove.tooltip');
        }.bind(this), false);
        _container.style.border = '3px solid rgb(255,0,0)';
    },
    show: function(_text) {
        this.tooltip.css('display', 'inline');
        this.tooltipTextContainer.text(_text);

    },
    hide: function() {
        this.tooltip.css({
            display: 'none',
            left: 0 + 'px',
            top: 0 + 'px'
        });

    },

};

你可以这样称呼：

var extractorTooltip = new ExtractorTooltip();   
extractorTooltip.initToolTip('tooltip', 'auto', 20, 'absolute', 'rgba(0, 0, 0, 0.5)', 10, '#ffffff', 'helvetica', 16, 12, 12);
        }
 $image.attr('filters', 'Filter data:' + filterDescription);
  self.extractorTooltip.addTooltipTo($image.get(0));

JSFIDDLE

如何在自定义工具提示中显示数据

2 个答案: