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

Question

提示:格式化为原始不会解决我的问题 - 分别见附件图片:

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

不幸的是,在标题中不可能呈现HTML标签.任何想法(欢迎链接)如何实现工具提示处理我的渲染HTML标签的意图？是否有任何其他选项实现tooltip-box外部属性 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 = []) ?>

然后,如果您查看bootstrap Tooltip选项的文档,则会有一个名为的选项HTML

将HTML插入工具提示.如果为false,则使用jQuery的文本方法将内容插入DOM.如果您担心XSS攻击,请使用文本.

其默认值为false,您必须手动将其设置为true.

显然,你有3个问题

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

• 没有名为任何属性vAlign的yii\grid\DataColumn,直到除非你用kartik\grid\DataColumn那么它的确定.

• 您没有使用选项HTMLtrue 初始化工具提示.

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

$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文件内的数组中重新排列文件.