Yii2: Use Html::tag() with HTML content for tooltip Bootstrap 3

Question

Hint: Formating as raw won't fix my problem - See attachement respectively picture:

The following code will implement tooltip using attribute title of method tag().

Unfortunately, there is no possibility rendering HTML-tags inside the title. Any ideas(links are welcome) how to implement tooltip handling my intention to render HTML tags? Is there any other option implementing tooltip-box outside attribute title, so that I am able to render HTML-tags

    [
        'attribute' => $dummy,
        'label' => Yii::t('app', 'Charakterisierung'),
        'format' => 'raw',
        'vAlign' => 'middle',
        '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-toggle' => 'tooltip',
                            'data-placement' => 'left',
                            '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

The Html::tag() takes 3 parameters like below

<?= Html::tag($name, $content = '', $options = []) ?>

Then if you look into the documentation for the bootstrap Tooltip options there is an option named HTML

Insert HTML into the tooltip. If false, jQuery's text method will be used to insert content into the DOM. Use text if you're worried about XSS attacks.

Which has the default value as false and you have to set it manually to true.

So apparently, you have 3 problems

• You are closing the options ] on the line 'title' => $model->person->personentypDominant->typ_empfehlung ],

• There isn't any attribute with the name vAlign for yii\grid\DataColumn untill unless you are using kartik\grid\DataColumn then it's ok.

• You are not initializing tooltip with the option HTML true.

First of all, add the following to the top of your view or inside the layout file if want to apply these setting allover

$js = <<<SCRIPT
/* To initialize BS3 tooltips set this below */
$(function () { 
   $('body').tooltip({
    selector: '[data-toggle="tooltip"]',
        html:true
    });
});
SCRIPT;
// Register tooltip/popover initialization javascript
$this->registerJs ( $js );

Change your code for GridView to the following, i assume that $model->person->personentypDominant->typ_empfehlung , has the HTML that you are trying to render

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

---

EDIT

You need to use the column format as raw when using the gridview otherwise the tooltip won't render.

"format"=>"raw"

---

Edit 2

Make Sure you are not Using AdminLTE theme with jquery UI as they have a conflict SEE ISSUE.

The causes of conflict on the jquery UI tooltip and the bootstrap tooltip are jQuery UI tooltip overwrite the Bootstrap tooltip maybe they use the same namespace and function name.

Add the following code in your javascript (solution from here)

var bootstrapTooltip = $.fn.tooltip.noConflict();
$.fn.bstooltip = bootstrapTooltip;
$('element').bstooltip();
var bootstrapTooltip = $.fn.tooltip.noConflict();
$.fn.bstooltip = bootstrapTooltip;
$('element').bstooltip();

Demo

$(document).ready(function() {
  var bootstrapTooltip = $.fn.tooltip.noConflict();
  $.fn.bstooltip = bootstrapTooltip;
  $('#mybtn').bstooltip();
})

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div style="margin:100px;">
  <button id="mybtn" title="my tooltip showing now">hover me</button>
</div>

The point that needs attention is that we must put the jqueryui.js before bootstrap.js, so you have to rearrange your .js files in the $js array inside the AppAsset file you are using to load all the scripts.

Answer 2

Please note that now bootstrap 3.4.1 and 4.3.1 has a sanitizer that block most of HTML tags by default.

If your tooltip (or popover) data-content contain one or more HTML tags not listed in the default whitelist, you need to add them manually:

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