styling title/tooltip in jqxgrid cell

Question

I am using jqxgrid to create a grid and added a title to some span texts inside cells. But now I want to style these titles which is not possible as I know. So I tried to add tooltips, but tooltips are not shown properly. This is the css code

.title-styled[title]:hover:after {
    content: attr(title);
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 2147483647 !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

span:

...
    else {
         return '<br>&nbsp<span class="title-styled" title="Road:' + record.Quantity + '">' + value;
         }
...

Answer 1

You need to clarify more about the issue. What's your expected result? Explain what do you mean by "but tooltips are not shown properly" & "this shadow belongs to tooltip but it is shown under other cell". Provide the whole jqxgrid code for how you setup or a functional test case in jsfiddle are strongly recommended.

I can't see any tooltip output in your question. I assume your issue is simply tooltips not displaying. I suggest you use cellhover action to trigger jqxTooltip. jqxTooltip's content accept html code as input you can add your css style into it.

Example: https://jsfiddle.net/c40e3n6p/ (You need to modify it to fit your case!)

html code:

<div id="jqxgrid"></div>

css code:

.title-styled[title]:after {
    content: attr(title);
    color: #333;
    position: absolute;
    left: 0;
    top: 100%;
    white-space: nowrap;
    z-index: 2147483647 !important;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0px 0px 4px #222;
    -webkit-box-shadow: 0px 0px 4px #222;
    box-shadow: 0px 0px 4px #222;
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #eeeeee),color-stop(1, #cccccc));
    background-image: -webkit-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -moz-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -ms-linear-gradient(top, #eeeeee, #cccccc);
    background-image: -o-linear-gradient(top, #eeeeee, #cccccc);
}

JavaScript + jQuery code:

$(document).ready(function () {
    var data = [
        { id: 1, road: "A Road" },
        { id: 2, road: "B Street" }
    ];

    var source =
    {
        localdata: data,
        datatype: "array"
    };

    var dataAdapter = new $.jqx.dataAdapter(source);

    $("#jqxgrid").jqxGrid({
        width: 850,
        source: dataAdapter,
        pageable: true,
        autoheight: true,
        sortable: true,
        altrows: true,
        enabletooltips: false,  // Disable the default tooltips
        editable: true,
        selectionmode: 'multiplecellsadvanced',
        
        cellhover: function (element, pageX, pageY, record) {
            columnDatafield = $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY).column;
            rowDatafield = $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY).row;
            if (columnDatafield == "id") {  //Check if columnDatafield == "id"
                if ($('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY).value != null || $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY).value != "") {   //check grid cell(x,y) != null OR Empty
                    var cellValue = "<b class='title-styled' title='Road:" + $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY).value + "'>" + $('#jqxgrid').jqxGrid("getrowdata", $('#jqxgrid').jqxGrid('getcellatposition', pageX, pageY).value-1).road + "</b>";
                    var tooltipContent = "<div>" + cellValue + "</div>";
                    $(element).jqxTooltip({ content: tooltipContent });
                    $(element).jqxTooltip('open', pageX + 15, pageY + 15);
                } else {
                    $('#jqxgrid').jqxTooltip('close');
                }
            }
        },
        
        columns: [
            { text: 'Id', datafield: 'id', width: 60 },
            { 
                text: 'Road', 
                datafield: 'road', 
                width: 150,
                hidden: true
            }
        ]
    });
});