twitter-bootstrap - Yii2 NavBar に TOOLTIP を追加する方法

Question

私は、どこにでもあるウェブサイトやフォーラムで人々から寄せられた多くの提案を試しました。（ツールチップをアクティブにしています）しかし、まだ成功していません。このコーディングを自分のレイアウト ファイルに追加しました。ビュー/レイアウト

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

スパン内のラベルにタイトルを追加することができます...この方法

'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にこのクラスを追加します（例：色を変更するため）

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