如何为jqxGrid单元格内的title/tooltip设置自定义样式？

我用jqxGrid制作表格，已为单元格内的span文本添加title属性。但原生title无法设置自定义样式，因此尝试通过CSS实现自定义tooltip，却出现tooltip无法正常显示的问题。

相关CSS代码 #

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

效果截图 #

内容的提问来源于stack exchange，提问作者wittream