How can I use HTML tooltip with trigger:'both' in Google Charts

Question

I have to show HTML tooltip (using Google Charts) when the user click an hover de column bars, I've coded this and it shows the tooltip when the user hover the column bar:

<script type="text/javascript">
    var colores = ['#1D1E55', '#859DC4', '#6D165E'];
    var indiceColorAsignado = 0;
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
        var propiedadCol = {
            type: 'string',
            role: 'annotation'
        };
        var dataTable = google.visualization.arrayToDataTable([
            ['Id', {'type': 'string', 'role': 'tooltip', 'p': {'html': true}}<?php
                    $aux = $encabezados;
                    $conta = 1;
                    foreach ($aux as $key => $value) {
                        if ($conta < 3) {
                            unset($aux[$key]);
                            $conta++;
                        };
                    }
                    $complementoEncabezado = "";                                                                                        
                    foreach ($aux as $key => $value) {
                        $complementoEncabezado .= ",'".$value."',propiedadCol";                                                                                         
                    }
                    $complementoEncabezado .= "],";
                    echo $complementoEncabezado;
                ?>
                <?php
                    $renglodDeDatos = "";
                    $nombresToolTip = $encabezados;
                    unset($nombresToolTip['id']);
                    foreach ($datosAGraficar as $key => $value) {
                        $conta = 1;
                        foreach ($value as $llave => $valor) {
                            if ($conta != 2) {
                                if ($llave == "id") {
                                    $valoresToolTip = $value;
                                    unset($valoresToolTip['id']);
                                    $renglodDeDatos .= "['".$valor."',contenidoHTML(".json_encode($nombresToolTip).",".json_encode($valoresToolTip).")";
                                } else {
                                    $renglodDeDatos .= ",".$valor.",''";
                                }                                   
                            }
                            $conta++;
                        }
                        $renglodDeDatos .= "],";
                    }
                    echo $renglodDeDatos;
                ?>
        ]);

        var options = {
            title: '<?php echo $titulo_grafica; ?> del PGD',
            hAxis: {
                title: '<?php echo $titulo_grafica ?>',
                titleTextStyle: {
                    color: 'black',
                    bold:true,
                },
            },
            vAxis: {
                title: 'Porcentaje',
                titleTextStyle: {
                    color: 'black',
                    bold:true,

                },
            },
            // colors: ['#7F6FD2', '#94F29C', '#F8ECBC'],
            // colors: ['#AF9965', '#DAC674', '#F3E79A'],
            // colors: ['#EE7009', '#0A7AAC', '#504C4B'],
            // colors: ['#0A19BB', '#02073A', '#4D5073'],
            colors: colores,
            // backgroundColor: {
            //  stroke: 'red',
            //  strokeWidth: 10,
            // },
            focusTarget: 'category',
            selectionMode: 'multiple',
            tooltip: {
                isHtml: true,
            },
        };
        var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
        chart.draw(dataTable, options);
        google.visualization.events.addListener(chart, 'select', miFuncion);
        var columnas = new Array();

        function miFuncion() {
            var selection = chart.getSelection();
            var message = '';
            for (var i = 0; i < selection.length; i++) {
                var item = selection[i];
                if (item.row != null && item.column != null) {
                    var str = dataTable.getFormattedValue(item.row, item.column);
                    message += '{row:' + item.row + ',column:' + item.column + '} = ' + str + '\n';
                } else if (item.row != null) {
                    var str = dataTable.getFormattedValue(item.row, 0);
                    message += '{row:' + item.row + ', column:none}; value (col 0) = ' + str + '\n';
                } else if (item.column != null) {
                    var str = dataTable.getFormattedValue(0, item.column);
                    var indice = columnas.indexOf(item.column);
                    if (indice != -1) {
                        columnas.splice(indice, 1);
                        for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
                            dataTable.setValue(j, item.column + 1, '');
                        };
                    } else{
                        columnas.unshift(item.column);
                        for (var j = 0; j < dataTable.getNumberOfRows(); j++) {
                            dataTable.setValue(j, item.column + 1, (dataTable.getValue(j, item.column)).toString() + '%');
                        };
                    };
                    console.log('columnas '+columnas);
                    message += '{row:none, column:' + item.column + '}; value (row 0) = ' + str + '\n';
                };
            };
            if (message == '') {
                message = 'nothing';
            };
            console.log('You selected ' + message);
            chart.draw(dataTable, options);
        }

        function contenidoHTML(nombresToolTip,valoresToolTip) {
            var indiceObjeto = 1;
            var toolTipHTML = '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">';
            for(var elemento in nombresToolTip) {
                if (indiceObjeto == 1) {
                    toolTipHTML += '<b>' + nombresToolTip[elemento] + ':</b> ' + valoresToolTip[elemento] +'<br>';
                    indiceObjeto++;
                } else {
                    toolTipHTML += '<div style="background-color:'+ colores[indiceColorAsignado] +'; padding-left:5px; color:#FFFFFF;"><b>'+ nombresToolTip[elemento] +':</b> '+ (parseFloat(valoresToolTip[elemento])).toFixed(2) +'%</div>'
                    indiceColorAsignado++;
                };
            };
            toolTipHTML += '</div>';
            console.log('HTML '+toolTipHTML);
            // return '<div style="width:200px; text-align:justify; padding:5px 5px 5px 5px;">Nombre <br><hr><div style="background-color:#1D1E55; padding-left:5px; color:#FFFFFF;"><b>Avance real:</b> 1000%</div><div style="background-color:#859DC4; padding-left:5px; color:#FFFFFF;"><b>Grado de cumplimiento:</b> 400%</div><div style="background-color:#6D165E; padding-left:5px; color:#FFFFFF;"><b>Avance promedio:</b> 250%</div></div>';
            console.log('indiceColorAsignado '+ indiceColorAsignado);
            indiceColorAsignado = 0;
            return toolTipHTML;
        }
    }
</script>

How can I get both events(click and hover) in order to show the HTML tooltip? Thank a lot

Answer 1

Just set the option:

tooltip: {
    isHtml: true,
    trigger: 'both'
}