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

Question

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

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

不幸的是，不可能在标题中呈现 HTML 标记。任何想法（欢迎提供链接）如何实现工具提示来处理我呈现 HTML 标签的意图？是否有任何其他选项在属性之外实现工具提示框 title，以便我能够呈现 HTML 标记

    [
        '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 = []) ?>

然后，如果您查看引导程序 Tooltip 选项的文档，则会有一个名为 HTML 的选项

在工具提示中插入 HTML。如果为 false，jQuery 的 text 方法将是 用于将内容插入 DOM。如果您担心，请使用文本 XSS 攻击。

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

显然，你有 3 个问题

• 您正在关闭'title' => $model->person->personentypDominant->typ_empfehlung ], 行上的选项'title' => $model->person->personentypDominant->typ_empfehlung ],

• yii\grid\DataColumn 没有任何名称为 vAlign 的属性，除非您使用 kartik\grid\DataColumn，否则没关系。

• 您没有使用选项HTML true 初始化工具提示。

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

$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 一起使用，因为它们有冲突请参阅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
    });
});