javascript – Tooltip with mouseover inside a js grid column

Question:

I have this grid:

function CarregarGrid() {
            $('#gridConteudo').jqGrid({
                colModel: [{ width: 80, name: 'COD_OPERADORA', index: 'COD_OPERADORA', label: 'Operadora', formatter: GridOperadoraFormatter },
                           { name: 'NOM_OPERADORA', index: 'NOM_OPERADORA', hidden: true },
                           { width: 80, name: 'SITUACAO', index: 'SITUACAO', label: 'Situação' },
                           { width: 90, name: 'DT_EXCLUSAO_OPERADORA', index: 'DT_EXCLUSAO_OPERADORA', label: 'Dt. Exclusão Operadora', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 130, name: 'COD_REDE', index: 'COD_REDE', label: 'Rede', formatter: GridRedeFormatter },
                           { name: 'NOM_REDE', index: 'NOM_REDE', hidden: true },
                           { width: 90, name: 'DT_EXCLUSAO_REDE', index: 'DT_EXCLUSAO_REDE', label: 'Dt. Exclusão Rede' },
                           { width: 120, name: 'COD_PRESTADOR_SUBSTITUTO', index: 'COD_PRESTADOR_SUBSTITUTO', label: 'Prestador Substituto', formatter: GridPrestadorSubstitutoFormatter },
                           { name: 'NOME_PRESTADOR_SUBSTITUTO', index: 'NOME_PRESTADOR_SUBSTITUTO', hidden: true },
                           { width: 115, name: 'DESC_MOTIVO_EXCLUSAO', index: 'DESC_MOTIVO_EXCLUSAO', label: 'Motivo Exclusão' },
                           { width: 95, name: 'DT_NOTIF_VOLUNTARIA', index: 'DT_NOTIF_VOLUNTARIA', label: 'Dt. Notificação Excl. Voluntária', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_ATD', index: 'DT_LIMITE_ATD', label: 'Dt. Limite Realização', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_REMESSA', index: 'DT_LIMITE_REMESSA', label: 'Dt. Limite Apresentação', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_LIMITE_RECURSO', index: 'DT_LIMITE_RECURSO', label: 'Dt. Limite Reapresentação', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 90, name: 'DT_FIM_EXIBE_DIRECIONAMENTO', index: 'DT_FIM_EXIBE_DIRECIONAMENTO', label: 'Dt. Fim Exibe Site', sorttype: 'date', formatter: 'date', formatoptions: { srcformat: "d/m/Y", newformat: 'd/m/Y' } },
                           { width: 100, name: 'OBSERVACAO', index: 'OBSERVACAO', label: 'Observação' }],
                url: urlControle + '/GetPrestadorOperadora',
                mtype: 'POST',
                postData: { "pEXEC": function () { return $("#pEXEC").val(); }, "pCodPrestadorTS": function () { return $("#hidCodPrestadorTS").val(); } },
                jsonReader: { repeatitems: false, root: function (obj) { return obj.Items; } },
                datatype: "json",
                autowidth: true,
                shrinkToFit: false,
                forceFit: true,
                loadonce: true,
                loadError: function (xhr, st, err) { $.notificacoes.erro("@TopSaudeResource.notificacao_erro_transacao"); },
                loadComplete: function () {

                    if ($('#hidCodPrestadorTS').val() != '') {

                        var linhas = $("#gridConteudo").getDataIDs();

                        if (linhas.length <= 0) {
                            $('#divConteudo').hide();
                            $.notificacoes.erro("Prestador não está excluído em nenhuma Operadora e/ou Rede");
                        }
                        else {
                            $('#divConteudo').removeAttr('style');
                            $('#divConteudo').show();
                        }
                    }
                }
            });

            $('#gridConteudo').jqGrid('setLabel', 'COD_OPERADORA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'SITUACAO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_EXCLUSAO_OPERADORA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'COD_REDE', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_EXCLUSAO_REDE', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'COD_PRESTADOR_SUBSTITUTO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DESC_MOTIVO_EXCLUSAO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_NOTIF_VOLUNTARIA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_ATD', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_REMESSA', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_LIMITE_RECURSO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'DT_FIM_EXIBE_DIRECIONAMENTO', '', { 'text-align': 'left' });
            $('#gridConteudo').jqGrid('setLabel', 'OBSERVACAO', '', { 'text-align': 'left' });
        }

I need to put a tooltip inside the OBSERVACAO column. This is my tooltip that I made (example I got on the net) and it works, as I've already tested it on a simple html page. The problem is calling inside that grid. See the css that assembles the tooltip:

.tooltip {
        position: relative;
        font-size: 12px;
        color: #039;
        text-decoration: none;
        cursor: help;
        }

        .tooltip:hover {
            background: transparent;
            color: #f00;
            z-index: 25;
        }

        .tooltip span {
            display: none;
        }

        .tooltip:hover span {
            display: block;
            position: absolute;
            width: 210px;
            top: 20px;
            left: 0;
            font-size: 12px;
            padding: 5px;
            border: 1px solid #999;
            background: #e0ffff;
            color: #000;
        }

What do I call this from within the above-cited column?

Answer:

In this line:

{ width: 100, name: 'OBSERVACAO', index: 'OBSERVACAO', label: 'Observação' }],

Put at the end:

class: 'alwaysShow'

Result:

{ width: 100, name: 'OBSERVACAO', index: 'OBSERVACAO', label: 'Observação', class: 'tooltip' }],

But that's in the column. Your tooltip is applying an element a .

Scroll to Top