Question

正如您在下图所示，工具提示是缩小的，它应该更宽，因为我希望能够看到数据库的所有数据。任何想法如何扩展工具提示？

这是工具提示的代码

[
    '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

您始终可以添加一个css类来覆盖max-width类上的.tooltip-inner属性集，该属性会将您的内容显示为工具提示，默认设置为200px;

例如，请考虑以下HTML和ul li作为工具提示内容

<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>

将以下css类添加到视图

$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);

这将显示如下工具提示

如何获得更广泛的工具提示输出

1 个答案: