qTip2 - Simple Demo on tooltips

A simple demo of qtip2.js.

by Rambabu Pudi

HTML

<script src="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/qtip2/2.2.0/jquery.qtip.min.css">
<div measure="UNIT_RETAIL" class=" dhx_cell_odd " title="85.67" >
            <span class="metaInfo">
                          <span style="display:none" class="cell_lock ui-icon ui-icon-locked "></span><span class="errorInd "></span>
                          </span><span class=" cmtRelation-SELF" title="TestComments" > comments</span>

                            <span class="  cell_content double ">
                            85.67                    
                            </span>
						 
            </div>

CSS

/**
 * Customizing the tool-tip color.
 */
 .different-tip-color {
    background-color: #CAED9E;
    border-color: #90D93F;
    color: #3F6219;
}
ul {
    list-style-type: none;
}
li {
    padding: 5px;
}

.pivot-data-cell-tooltip {
  border-color: black;
  background-color: white;
  font-size: 12px;
  line-height: 2px;
  box-shadow: 2px 3px #CACACA;
  min-width: 10px;
  padding: 5px 0px 5px 0px;
}

JavaScript

// Configure tooltip for data cells
                $('.dhx_cell_odd, .dhx_cell_even,').qtip({
                    content: {
                        text: false // Use each elements title attribute
                    },
                    show: {
                        delay: 400,
                    },
                    position: {
                        target: 'mouse',
                        adjust: {
                            x: 0,
                            y: 10,
                            mouse: false
                        }
                    },
                    style: {
                        classes: 'pivot-data-cell-tooltip',
                        tip: false
                    },
                    events:{
                    	show : function(eventTip, api){
                    		if($('.pivot-data-cell-tooltip').length > 1){
                    			$('.pivot-data-cell-tooltip').hide();
                    			$('.pivot-data-cell-tooltip').hover(function(el){
                    				$('.pivot-data-cell-tooltip').qtip('hide');
                    			});
                    		}
                    	}
                    }
                });
                
                $('.cmtRelation-SELF, .cmtRelation-ANCESTORS,.cmtRelation-DESCENDANTS').qtip({
                    content: {
                        text: false // Use each elements title attribute
                    },
                    show: {
                        delay: 400,
                    },
                    position: {
                        target: 'mouse',
                        adjust: {
                            x: 0,
                            y: 10,
                            mouse: false
                        }
                    },
                    style: {
                        classes: 'pivot-data-cell-tooltip',
                        tip: false
                    },
                    events:{
                        show :...