Yii2：将 Html::tag() 与 HTML 内容一起用于工具提示 Bootstrap 3

Question

提示：格式化为原始格式无法解决我的问题 - 请分别查看附件图片：

以下代码将使用方法 tag() 的属性 title 实现工具提示。

不幸的是，无法在标题中呈现 HTML-tags。任何想法（欢迎链接）如何实现工具提示来处理我呈现 HTML 标签的意图？是否有任何其他选项实现 tooltip-box 外部属性 title，这样我就可以渲染 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

Html::tag() 需要 3 个参数，如下所示

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

然后如果您查看 bootstrap Tooltip 选项的文档，有一个名为 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.

默认值为false，您必须手动将其设置为true。

很明显，你有 3 个问题

您正在关闭第 'title' => $model->person->personentypDominant->typ_empfehlung ],

]

在 yii\grid\DataColumn 中没有任何名称为 vAlign 的属性，除非您使用 kartik\grid\DataColumn 否则没关系。
您没有使用 HTML 选项初始化工具提示。

首先，如果要全面应用这些设置，请将以下内容添加到视图顶部或布局文件中

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

将 GridView 的代码更改为以下内容，我假设 $model->person->personentypDominant->typ_empfehlung , 具有您要呈现的 HTML

[
    '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`

在使用 gridview 时，您需要将列 format 用作 raw，否则工具提示将不会呈现。

"format"=>"raw"

`Edit 2`

确保您没有将 AdminLTE 主题与 jquery UI 一起使用，因为它们有冲突 SEE ISSUE。

jquery UI 工具提示和 bootstrap 工具提示冲突的原因是 jQuery UI 工具提示覆盖了 Bootstrap 工具提示，也许它们使用相同的命名空间和函数名称。

在您的 javascript 中添加以下代码（来自 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>

需要注意的一点是我们必须把jqueryui.js放在bootstrap.js之前，所以你必须重新排列你的.js文件在$js数组里面AppAsset 您用来加载所有脚本的文件。

Answer 2

请注意，现在 bootstrap 3.4.1 和 4.3.1 有一个 sanitizer 默认阻止大多数 HTML 标签。

如果您的工具提示（或弹出窗口）数据内容包含一个或多个 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
    });
});

Yii2：将 Html::tag() 与 HTML 内容一起用于工具提示 Bootstrap 3

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

yii2

twitter-bootstrap-3

yii2-advanced-app

`EDIT`

`Edit 2`

`Demo`