How to get wider output of tooltip - yii2

Question

As you can see at following picture, tooltip is to narrow, it should be wider, because I want to be able to see all data of database. Any ideas how to extend tooltip?
Here is code of tooltip
[
'attribute' => $dummy,
'label' => Yii::t('app', 'Charakterisierung'),
'format' => 'raw',
'value' => function($model) {
if (!empty($model->person->personentypDominant->typ_name)) {
$tag = Html::tag('span', 'Tooltip-Touch Me!', [
// html-tags will be rendered in title using jquery
'title' => $model->person->personentypDominant->typ_empfehlung,
'data-placement' => 'left',
'data-toggle' => 'tooltip',
'style' => 'white-space:pre;border:1px solid red;'
]);
return $tag . "<br>" . $model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3 . "," . $model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;
}
}
],

Answer 1

You can always add a css class to override the max-width property set on the .tooltip-inner class which shows your content as tooltip it is set to default at 200px;
for example, consider the below HTML with ul li, as the tooltip content
<ul>
<li>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</p>
</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
<li>some point</li>
</ul>
add the following css classes to the view
$css = <<<CSS
.tooltip-inner ul{
list-style-type:none;
padding:0;
margin:0;
width:100%;
}
.tooltip-inner{
max-width:700px !important;
}
CSS;
$this->registerCss($css);
this will show you the tooltip like below