5

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

Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68
tklustig
  • 483
  • 6
  • 24
  • Possible duplicate of [Render html in yii2 Gridview Widget](https://stackoverflow.com/questions/42385274/render-html-in-yii2-gridview-widget) – Patrick May 02 '18 at 14:27
  • can you confirm by adding the normal anchor tag with a tooltip if it displays it properly outside the gridview ? – Muhammad Omer Aslam May 02 '18 at 15:58
  • I don't undestand. What should I confirm?? – tklustig May 02 '18 at 16:58
  • Tooltip nowhere will be displayed properly. Both, in Grid View and in formular, html tags won't be rendered! – tklustig May 02 '18 at 17:17
  • what is the version of bootstrap you are using ? – Muhammad Omer Aslam May 02 '18 at 19:46
  • try changing the **Register tooltip/popover initialization javascript** line to the following `$this->registerJs($js, \yii\web\view::POS_READY);` – Muhammad Omer Aslam May 02 '18 at 20:00
  • you can try to add data-html="true" – Sfili_81 May 03 '18 at 08:54
  • I use Bootstrap beeing involved by "yiisoft/yii2-bootstrap": "~2.0.0", in json. No effect integrating upper registerJS. Including data-html:true, will cause error:"SyntaxError: missing : after property id" ! Just html:true, runs without error.... – tklustig May 04 '18 at 08:57
  • selector: '[data-toggle="tooltip",html="true",data-html="true"] won't throw out error, any more, but is ineffective! – tklustig May 04 '18 at 09:09
  • can you do one thing can you provide the view-source of that page where it is not working , you can create a pastebin to show the view source , – Muhammad Omer Aslam May 13 '18 at 12:18
  • All right: Here is pastebinlink 1:https://pastebin.com/kGSUArfv . And here is pastbinlink 2:https://pastebin.com/8yMryAN6 . Both files don't render html tags correctly! – tklustig May 14 '18 at 11:13
  • Here is pastebinlink for my layoutfile:https://pastebin.com/cYYy6fAn – tklustig May 14 '18 at 11:20

3 Answers3

9

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.

Muhammad Omer Aslam
  • 22,976
  • 9
  • 42
  • 68
  • This won't fix my problem. In both cases, html-tags still won't be rendered! I inserted new attachement to show new tooltip above! – tklustig May 17 '18 at 07:47
  • @tklustig, well this works for me you must have something at your end as for gridview format=>raw works perfectly with the tooltip along with the HTML including
    tags. see here https://imgur.com/a/8RPjMwT
    – Muhammad Omer Aslam May 17 '18 at 11:02
  • So I assume, that some CSS-rule of AdminLTE prevents rendering html-tags! I have no idea, of course,which one this colud be. Will U be able to render html-tags using AdminLTE,too?? – tklustig May 17 '18 at 14:41
  • For me, tooltip works, too. But only if I render another layout file, without using AdminLTE!! Maybe, error is in layout file as shown above – tklustig May 17 '18 at 15:02
  • if changing the layout is making the tooltip act weird then the only thing i see is `AdminLteAssets` do you have any extra files added inside the asset manager class, can you add it here. @tklustig – Muhammad Omer Aslam May 17 '18 at 15:12
  • it could be that the custom scripts inside the admin lte are initializing the tooltip ? without `html:true` , could be can you move the script we added on top in the layout for the tooltip to the view where you are initializing the gridview ? can you check that @tklustig – Muhammad Omer Aslam May 17 '18 at 15:20
  • No change coding like this in GridView after having removed jquery code from layoutfile $js = << – tklustig May 17 '18 at 15:35
  • `app.min.js` is this file actually `adminlte.js` renamed ? – Muhammad Omer Aslam May 17 '18 at 15:44
  • are you using `jquery.ui` in your application ? @tklustig – Muhammad Omer Aslam May 17 '18 at 15:48
  • Solved! After having removed app.min.js and copied adminlte.js into js folder and integrated this js-file in my asset-class, html-tags finally will be rendered! Thx for ur efforts helping me! Gave u reputation twice, in both threads! Greetings to Agypt! – tklustig May 17 '18 at 15:53
  • haha turned out some weird javascript is making fun of all programmers `:D` by getting them into a fight on Stackoverflow @tklustig – Muhammad Omer Aslam May 17 '18 at 15:54
1

In case if you still could not achieve a view of HTML inside the tooltip after @Muhammad Omer Aslam's answer.

  1. Try to add 'data-html' => 'true' or with js way $(selector).tooltip({html: true}) NOTE: based on bootstrap official documentation Use text if you're worried about XSS attacks.
  2. Check if you do not include a jquery-ui tooltip widget. Which will overwrite bootstrap's tooltip. To Fix it add a script like :
$(selector).tooltip({
    content: function () {
        return this.getAttribute("title");
    },
});

In this link you can find other ways fix jQeuer-UI tooltip

sambua
  • 2,274
  • 3
  • 22
  • 20
0

Be warned that Bootstrap 4.3.1 and 3.4.1 now comes with an HTML sanitizer and a most of tags are now suppressed by default.

Here the bootstrap blog annuncement and the docs for 3.4.1. So now you need to whitelist any other tag inside your tooltip (or popover) HTML

var myDefaultWhiteList = $.fn.tooltip.Constructor.DEFAULTS.whiteList

// To allow table elements
myDefaultWhiteList.table = []

// To allow td elements and data-option attributes on td elements
myDefaultWhiteList.td = ['data-option']

// You can push your custom regex to validate your attributes.
// Be careful about your regular expressions being too lax
var myCustomRegex = /^data-my-app-[\w-]+/
myDefaultWhiteList['*'].push(myCustomRegex)

// initialize your tooltip
$(function () {
    $('[data-toggle="tooltip"]').tooltip({
        // set your custom whitelist
        whiteList: myDefaultWhiteList
    });
});