代码之家 › 专栏 › 技术社区 › tklustig

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

twitter-bootstrap-tooltip yii2

tklustig · 技术社区 · 8 年前

正如你们在下图中所看到的,工具提示要缩小,它应该更宽,因为我希望能够看到数据库的所有数据。如何扩展工具提示?

以下是工具提示代码

[
    '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;
        }
    }
],

1 回复 | 直到 8 年前

Muhammad Omer Aslam 8 年前

您始终可以添加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);

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