Resolve the Bootstrap Tooltip conflict with jQuery UI Tooltip in Yii2

Encountered this issue when trying to get some tooltips working on my Yii2 web app which uses Bootstrap and some jQuery UI to jointly build the user interface. I noticed that the jQuery UI tooltips overrides the Bootstrap tooltip function. This is because they both share the same JavaScript namespace, $.fn.tooltip

You can avoid the conflict simply loading Bootstrap after jQury UI is loaded. But how you can do this in Yii2. You may do this using Yii2 Asset Manager configurations. Usually the Bootstrap Plugin Assets depend only on JqueryAsset and BootstrapAsset bundles. In order to load bootstrap.js after the jQury UI has loaded, you have to add it to the list of depending asset bundles of the BootstrapPluginAsset



...

'components' => [
       ...
        'assetManager' => [
            'bundles' => [
                'yii\web\JqueryAsset' => [
                    'sourcePath' => null,
                    'js' => [
                        '//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js',
                    ],
                ],
                'yii\bootstrap\BootstrapPluginAsset' => [
                    'js' => [
                        'js/bootstrap.min.js',
                    ],
                    'depends' => [
                        'yii\web\JqueryAsset',
                        'yii\jui\JuiAsset',
                        'yii\bootstrap\BootstrapAsset',
                    ],
                ],
            ],
        ],
    ],

... 


Not only for tooltips, this method may be useful in any situation where you want to load some resources before others, or in a particular order.

Read more about Asset Management in Yii2

Saranga
Saranga A web developer and highly passionate about research and development of web technologies around PHP, HTML, JavaScript and CSS.
comments powered by Disqus