Friday, May 18, 2018

Yii2: HTML won't be rendered using Tooltip

Leave a Comment

Hint: Pastebin links have been inserted as shown up in my last comment

Hint: Solution of Muhammad still doesn't work(see a picture of the new tooltip)! enter image description here

My layout file is coded like this:

<?php  use yii\helpers\Html; use common\wsl_components\AdminLteAsset;  $js = <<<SCRIPT $(function () {    $('body').tooltip({     selector: '[data-toggle="tooltip"]',         html:true     }); }); SCRIPT; // Register tooltip/popover initialization javascript $this->registerJs($js); AdminLteAsset::register($this); $this->beginPage() ?> <!DOCTYPE html> <html lang="<?= Yii::$app->language ?>">     <head>         <meta charset="<?= Yii::$app->charset ?>"/>         <meta name="viewport" content="width=device-width, initial-scale=1">         <?= Html::csrfMetaTags() ?>         <title><?= Html::encode($this->title) ?></title>         <?php $this->head(); ?>     </head>     <body class="hold-transition skin-blue sidebar-mini sidebar-collapse">         <?php $this->beginBody(); ?>         <div class="wrapper">             <?=             $this->render(                     'header.php'             );             ?>             <?=             $this->render(                     'left.php'             );             ?>             <?=             $this->render(                     'content.php', ['content' => $content]             );             ?>         </div>          <?php $this->endBody(); ?>     </body> </html> <?php $this->endPage(); ?> 

My GridView is coded like this:

[     'attribute' => $dummy ,     'label' => Yii::t ( 'app' , 'Charakterisierung' ) ,     'format' => 'html' ,     'value' => function($model) {         if ( !empty ( $model->person->personentypDominant->typ_name ))  {             $tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [                    // html-tags won't be rendered in title                    '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;         }     } ], 

Nevertheless, HTML-Tags in Tooltip won't be rendered. They appear, as they are in database, for instance like this:

Verhaltensempfehlung:<br><ul><li> Kompetenz und Selbstbewusstsein zeigen,</ul></li> 

I don't know why, but upper tags won't be interpreted. They are in Tooltip hardcoded. Any ideas, what I do wrong?

Edit: My question having been answered by Muhammad is exactly same, but answer didn't solve my problem! In order to show my problem, look at attachement,please!

enter image description here

1 Answers

Answers 1

You have 2 mistakes apparently

  1. In this view you provided on the line 149 you are missing the attribute data-toggle="tooltip" on the spans.

    change them to

    $tag_rot = Html::tag ( 'span' , 'Typ Rot' , [             'title' => $tooltip_rot ,             'data-toggle' => 'tooltip' ,             'data-placement' => 'left' ,             'style' => 'white-space:pre;border:2px solid red;'         ] ); $tooltip_green = \common\modules\lookup\models\LPersonentyp::findOne ( 2 )->typ_empfehlung; $tag_green = Html::tag ( 'span' , 'Typ Grün' , [             'title' => $tooltip_green ,             'data-toggle' => 'tooltip' ,             'data-placement' => 'left' ,             'style' => 'white-space:pre;border:2px solid green;'         ] ); $tooltip_blue = \common\modules\lookup\models\LPersonentyp::findOne ( 3 )->typ_empfehlung; $tag_blue = Html::tag ( 'span' , 'Typ Blau' , [             'title' => $tooltip_blue ,             'data-toggle' => 'tooltip' ,             'data-placement' => 'left' ,             'style' => 'white-space:pre;border:2px solid blue;'         ] ); 
  2. In your Gridview column you are using "format"=>"html" whereas you should be using "format"=>"raw"

    change the column definition to the following

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

The answer i gave previously was more focused towards the tooltip usage with the html::tag() and i used your code for gridview column to copy paste, and forgot to mention it there in case of using inside the gridview, i have updated that answer too.

If You Enjoyed This, Take 5 Seconds To Share It

0 comments:

Post a Comment