如何在 Yii2 NavBar 中添加 TOOLTIP

Question

我尝试了很多网站、论坛上人们提出的建议。 (Activating Tooltip) 但我仍然没有成功。我在我自己的布局文件中添加了这个编码。 views/layouts

NavBar 小部件编码

 'items' => [  
            [
              'label' => '<span style="font-size:1.3em;" class="glyphicon glyphicon-cog"></span>', 
              'url' => ['/site/controlPanel'],
              'options' =>[ 
                              'data-toggle' => 'tooltip',  
                              'data-placement' => 'tooltip',
                              'title' =>'Control Panel', 
                              'class' => 'tooltipStyle'
                          ],
            ],
            [
              'label' => '<span style="font-size:1.3em;" class="glyphicon glyphicon-tasks"></span>', 
              'url' => ['/site/controlPanel'],
              'options' =>[ 
                              'data-toggle' => 'tooltip',  
                              'data-placement' => 'tooltip',
                              'title' =>'Day Summary',
                              'class' => 'tooltipStyle'
                          ],
            ],

CSS

.tooltipStyle + .tooltip > .tooltip-inner {
background-color: #000;
}
.tooltipStyle + .tooltip > .tooltip-arrow { 
    border-bottom-color:#ff0; 
}

最终我只想得到这样的输出

对我的编码进行了一些修改后，显示了此输出。

Answer 1

您可以通过这种方式将标题添加到 span 中的标签中

'items' => [  
        [
          'label' => '<span style="font-size:1.3em;" 
                   class="glyphicon glyphicon-cog"</span>'
            . '  Control Panel', 
          'options' =>[ 'data-toggle' => 'tooltip',  
                        'data-placement' => 'tooltip',
                         'title' =>'Notifications', 
                          'class' => 'myTooltipClass']
          'url' => ['/site/controlPanel'],
          'data-toggle' => 'tooltip',
          'title' => 'Control Panel',
        ],

然后在你 css 添加此 class （例如：用于更改颜色）

.myTooltipClass + .tooltip > .tooltip-inner {background-color: #ff0;}
.myTooltipClass + .tooltip > .tooltip-arrow { border-bottom-color:#ff0; }

如何在 Yii2 NavBar 中添加 TOOLTIP

How to add TOOLTIP in Yii2 NavBar

twitter-bootstrap

yii2

twitter-bootstrap-tooltip