How to show data in custom tooltip

Question

I have a table looks like below structure.

user_id  Payment_status
1          Pending
2          Success
3          Failed

I have created sample example, on hover of user id I am getting user info which I need to show on tooltip, I need a styled tooltip that looks like bootstrap tooltip with data placement top. Please see this example and TryHere

If you see in console I am getting data of hovered user, I just need to show this data like tooltip and on hover out I need to hide. Please check fiddle and open console. You will get it. Ask me if any info missing.

Here is JS code

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);
                    };
                };
})

Html code

<table>
  <thead>
    <tr>
      <th>user_id</th>
      <th>Payment Status</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a class="user_id"  href="">1</a></td>
      <td>Success</td>
    </tr>
     <tr>
      <td><a class="user_id" href="">2</a></td>
      <td>Failed</td>
    </tr>
     <tr>
      <td><a class="user_id" href="">3</a></td>
      <td>Pending</td>
    </tr>
  </tbody>
</table>

Answer 1

if you add this line to your javascript you can see the tooltip

 $('.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

I use this tooltip code:

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'
        });

    },

};

You can call it like:

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