How to customize free-jqgrid tooltip css style

Question

I would like to change the default free-jqgrid tooltip css style.

Setting .ui-tooltip has no effect on free-jqgrid tooltip css style, as it can be seen in the following code snippet.

$(function() {

  var data = [{
          id: 10,
          firstName: "Angela",
          lastName: "Merkel",
          inCharge: "1"
        },
        {
          id: 20,
          firstName: "Vladimir",
          lastName: "Putin",
          inCharge: "1"

        },
        {
          id: 30,
          firstName: "Boris",
          lastName: "Johnson",
          inCharge: "1"

        },
        {
          id: 40,
          firstName: "Joe",
          lastName: "Biden",
          inCharge: "1"

        },
        {
          id: 50,
          firstName: "Emmanuel",
          lastName: "Macron",
          inCharge: "1"

        },
                {
          id: 60,
          firstName: "Mario",
          lastName: "Draghi",
          inCharge: "1"

        }
      ];
 
  
  $("#grid").jqGrid({  
      datatype: "local",
      data: data,
      colModel: [{
          name: "id",
          hidden: true,
          editable: false,
        },
        {
          name: "firstName",
          width: 300,
          editable: true
        },
        {
          name: "lastName",
          width: 300,
          editable: true
        },
        {
          name: "inCharge",
          width: 100,
          editable: true,
          formatter: "checkbox",
          edittype: "checkbox",
          editoptions: {
            value: "1:0" 
          }
        }
      ],
      pager: true,
      pgbuttons: false,
      pginput: false,
      viewrecords: true,
      autowidth: true, 
      shrinkToFit: false, // Shows horizontal scroll bar
      cmTemplate: {align: 'center',
                  autoResizable: true,
                  autoResizing: {compact: true}},
      gridview: true,
    })
    .jqGrid('navGrid', {
      edittext: 'Edit',
      addtext: 'Add',
      deltext: 'Del',
      search: false,
      view: true,
      viewtext: 'View',
      refresh: true,
      refreshtext: 'Refresh'
    });    
});

.ui-tooltip {
   border: 1px solid blue;
   background: green;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/themes/redmond/jquery-ui.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/css/ui.jqgrid.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.15.5/jquery.jqgrid.min.js"></script>

<table id="grid"></table>

Is the class .ui-tooltip the right class to change to set jqgrid tooltip ?

In any case, I would like to know the right way to define its style.

Thanks in advance.

Answer 1

You need to attach the tooltip plugin in order to have what you want.

Usually this is done in gridComplete event. In your example just add this code:

   $("#grid").jqGrid({  
   ....
       gridComplete : function() {
           $(this).tooltip();
       }
   ...
   });

and your code will work.