Yii2:将 Html::tag() 与 HTML 内容一起用于工具提示 Bootstrap 3 [英] Yii2: Use Html::tag() with HTML content for tooltip Bootstrap 3

问题描述

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

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

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

<预><代码> ['属性' =>$虚拟，'标签' =>Yii::t('app', 'Charakterisierung'),'格式' =>'生的'，'vAlign' =>'中间'，'价值' =>功能($模型){if (!(empty($model->person->personentypDominant->typ_name))) {$tag = Html::tag('span', 'Tooltip-Touch Me!', [//html-tags 不会在标题中呈现'标题' =>$model->person->personentypDominant->typ_empfehlung],'数据切换' =>'工具提示','数据放置' =>'剩下'，'风格' =>'white-space:pre;border:1px 纯红色;']);返回 $tag .
".$model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1.，".$model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3.，".$model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;}}],

解决方案

Html::tag() 接受如下 3 个参数

然后，如果您查看引导程序的文档 工具提示 options 有一个名为HTML

的选项<块引用>

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

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

很明显，你有3个问题

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

• yii\grid\DataColumn 直到你使用 kartik\grid\DataColumn 否则它是好的.

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

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

$js = <<<SCRIPT/* 要初始化 BS3 工具提示，请在下面设置它 */$(函数(){$('body').工具提示({选择器:'[数据切换=工具提示"]'，html:真});});脚本;//注册工具提示/弹出框初始化 javascript$this->registerJs ( $js );

将 GridView 的代码更改为以下内容，我假设 $model->person->personentypDominant->typ_empfehlung ， 具有 HTML 你正在尝试渲染

<预><代码>['属性' =>$dummy ,'标签' =>Yii::t ( 'app' , 'Charakterisierung' ) ,'格式' =>'生的' ，'价值' =>功能($模型){如果(！(空($model->person->personentypDominant->typ_name))){$tag = Html::tag ( 'span' , 'Tooltip-Touch Me!' , [//html-tags 不会在标题中呈现'标题' =>$model->person->personentypDominant->typ_empfehlung ,'数据放置' =>'剩下' ，'数据切换'='工具提示''风格' =>'white-space:pre;border:1px 纯红色;']);返回 $tag .
".$model->person->personentypDominant->typ_verhaltensmerkmal_im_team_1.，".$model->person->personentypDominant->typ_verhaltensmerkmal_bei_stress_3.，".$model->person->personentypDominant->typ_verhaltensmerkmal_am_arbeitsplatz_4;}}];

<小时>

编辑

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

"format"=>"raw"

<小时>

编辑 2

确保您没有将 AdminLTE 主题与 jquery UI 一起使用，因为它们存在冲突请参见 问题.

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

在您的 javascript 中添加以下代码(解决方案来自 这里)

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

演示

$(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="样式表"><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="我的工具提示现在显示">将我悬停</button>

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

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;
            }
        }
    ],

解决方案

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.

这篇关于Yii2:将 Html::tag() 与 HTML 内容一起用于工具提示 Bootstrap 3的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！