Custom tooltip with google chart and Laravel

Question

I´m trying to create customs tooltips with google charts and Laravel.

    var rdb = new google.visualization.arrayToDataTable([
    ['', 'Contract Cost', 'Deployment Cost', {label: 'T2', role: 'tooltip'}],
    @foreach($rdbs as $rdb)
        @foreach ($rdb as $result)         
        ['{{mb_strimwidth($result->product, 0,50,"...")}}', {{$result->contract_costs}},{{$result->deployment_costs}},'{{$result->product}}'],
        @endforeach   
    @endforeach   

The '' has a product name limit to 50, the tooltips that I need to show have full product name. ¿Any idea why this code doesn't work? The tooltips show name with limit to 50, not with the full name.

Update:

var full= $( "panel-body" ).width();

    var options = {
        width: full,
        height: rdb.getNumberOfRows()*20,
        bars: 'horizontal', 
    }   

Answer 1

when using custom tooltips,
the tooltip role needs to follow the series column it represents
each y-axis series should have its own tooltip column

you have two y-axis series ( 'Contract Cost' & 'Deployment Cost' )
but only one tooltip column

to correct and show the full name for both tooltips,
add another tooltip column after 'Contract Cost'

var rdb = new google.visualization.arrayToDataTable([
['', 'Contract Cost', {label: 'T1', role: 'tooltip'}, 'Deployment Cost', {label: 'T2', role: 'tooltip'}],
@foreach($rdbs as $rdb)
    @foreach ($rdb as $result)         
    ['{{mb_strimwidth($result->product, 0,50,"...")}}',{{$result->contract_costs}},'{{$result->product}}',{{$result->deployment_costs}},'{{$result->product}}'],
    @endforeach   
@endforeach   

---

EDIT

column roles , such as 'tooltip' , are not supported by Material charts...

see --> Tracking Issue for Material Chart Feature Parity
for the several other options that are not supported...

Material --> google.charts.Bar -- packages: ['bar']

Classic --> google.visualization.BarChart -- packages: ['corechart']

note: there is an option to style Classic charts similar to Material charts

theme: 'material'