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

Question

如下图，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

您始终可以添加 css class 来覆盖显示您的内容的 .tooltip-inner class 上的 max-width 属性设置作为工具提示，它默认设置为 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 class 添加到视图

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

这将向您显示如下所示的工具提示

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

How to get wider output of tooltip

yii2

twitter-bootstrap-tooltip