Jqgrid tooltip

by Asmita Jadhav

HTML

<link rel="stylesheet" href="https://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<script src="https://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="https://trirand.com/blog/jqgrid/js/jquery.jqGrid.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<table id='myTable'></table>

CSS

.tooltip.left .tooltip-inner {
    background-color:white;
    color:black;
  }

JavaScript

console.clear();
function __columnStyle(rowid, cellValue, rawData, colModel, rowData) {
    if (colModel.name == "desc")
        return "style='font-weight: bold;'"
    else
        return "style='font-style: italic;'"
}

var myData = [
    {"id": 1, "cell": [1,"ITEM01","2013/01/01"]},
    {"id": 2, "cell": [2,"ITEM02","2013/01/01"]},
    {"id": 2, "cell": [2,"ITEM02","2013/01/01"]}
];

var grid = jQuery("#myTable");
grid.jqGrid({
    colModel : [
        { name: "order", width: 70, align: "right", formatter: "integer" },
       	{ name: "desc",  width: 100, classes:"searchItem" , 		                     formatter:function(cellvalue, options, rowObject){
        		return '<a data-placement="left" data-toggle="tooltip" title="'+cellvalue+'">'+cellvalue+'</a>';
            } 
         },
        { name: "date",  width: 80, formatter: "date", cellattr:__columnStyle }
    ],
    height: "auto",
    datastr: myData,
    datatype: "jsonstring",
    jsonReader: { "root": function(obj){return obj;} },
    loadComplete:function(){
    	$("[data-toggle=tooltip]").tooltip();
    }
    
});