Krajee

Popover X

Thankful to Krajee! BUY A COFFEEor to get more out of us.

An extended popover widget for Yii Framework 2 based on the bootstrap-popover-x jQuery plugin by Krajee. This plugin is an extended popover JQuery plugin which combines both the popover and bootstrap modal features and includes various new styling enhancements. This widget can be setup just like the builtin yii\bootstrap\Modal, with some additional enhancements.

The popover-x plugin offers these advanced features:

  • The extended popover can be rendered just like a bootstrap modal dialog with the bootstrap popover styling. Since the plugin extends the bootstrap modal, all features of the bootstrap modal and its methods are also available.

  • Adds a popover footer along with header. Configuration of the HTML content for the popover is much easier, just like a bootstrap modal.

  • Specially styles and spaces out bootstrap buttons added in popover footer.

  • Add a close icon/button to a popover window.

  • Configure various prebuilt styles/templates. In addition to a default (grey), the Bootstrap library contextual color styles of primary, info, success, danger, and warning can be used.

  • Control popover placements with respect to the target element. The plugin supports 12 different placement options:

    • right
    • left
    • top
    • bottom
    • top top-left
    • top top-right
    • bottom bottom-left
    • bottom bottom-right
    • left left-top
    • left left-bottom
    • right right-top
    • right right-bottom
  • Specially style the popover arrow to be consistent for each contextual color and popover placement.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

PopoverX supports configuration of the bootstrap library version so that you can use this either with any Bootstrap version 3.x and above. For setting up the bootstrap version for your extension, you can configure the PopoverX::bsVersion property to one of the following.

  • To use with bootstrap 3 library - you can set PopoverX::bsVersion property to any string starting with 3 (e.g. 3 or 3.3.7 or 3.x)

  • To use with bootstrap 4 library - you can set PopoverX::bsVersion property to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

  • To use with bootstrap 5 library - you can set PopoverX::bsVersion property to any string starting with 5 (e.g. 5 or 5.1.0 or 5.x)

The following sections describe the pre-requisites for enabling Bootstrap library specific version support in your application and other related controls/overrides.

Global Bootstrap Version


Generally, you may also want to set a default version globally for all Krajee Extensions (instead of setting it for each widget or extension separately). In order to do this, you can setup the bsVersion property within Yii 2 application params (i.e. Yii::$app->params['bsVersion']). To set this up, add this section of code to your application params configuration file (e.g. config/params.php):

'params' => [
    'bsVersion' => '5.x', // this will set globally `bsVersion` to Bootstrap 5.x for all Krajee Extensions
    // other settings
    // 'adminEmail' => 'admin@example.com'
]

If PopoverX::bsVersion property is set, in addition to Yii::$app->params['bsVersion'], the extension level setting (PopoverX::bsVersion property) will override the Yii::$app->params['bsVersion']. If PopoverX::bsVersion property is not set, and Yii::$app->params['bsVersion'] is also not set, PopoverX::bsVersion property will default to 3.x (i.e. Bootstrap 3.x version will be assumed as default).

Yii2 Bootstrap Dependency


You need to install one of yiisoft/yii2-bootstrap or yiisoft/yii2-bootstrap4 or yiisoft/yii2-bootstrap5 extensions manually in your application to enable Bootstrap 3.x or 4.x or 5.x functionality respectively. This dependency has not been pre-built into the composer configuration for Krajee extensions, to allow better control to the developers in configuring their bootstrap library version. If bsVersion is set to 5.x and yiisoft/yii2-bootstrap5 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap5 extension. If bsVersion is set to 4.x and yiisoft/yii2-bootstrap4 is not installed, then an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap4 extension. Similarly, if bsVersion is set to 3.x and yiisoft/yii2-bootstrap is not installed, an exception message will be thrown mentioning you to install the yiisoft/yii2-bootstrap extension.

To install yiisoft/yii2-bootstrap5, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap5": "@dev"

To install yiisoft/yii2-bootstrap4, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap4": "@dev"

To install yiisoft/yii2-bootstrap, add the repo to the require section of your application's composer.json.

"yiisoft/yii2-bootstrap": "@dev"

Override Bootstrap CSS/JS


The Krajee extension asset bundle(s) by default depend on one of the following asset bundles to load the Bootstrap CSS and JS:

  • yii\bootstrap\BootstrapAsset and/or yii\bootstrap\BootstrapPluginAsset for bootstrap 3.x (bsVersion = 3 setting)

  • yii\bootstrap4\BootstrapAsset and/or yii\bootstrap4\BootstrapPluginAsset for bootstrap 4.x ( bsVersion = 4 setting)

  • yii\bootstrap5\BootstrapAsset and/or yii\bootstrap5\BootstrapPluginAsset for bootstrap 5.x (bsVersion = 5 setting)

This is controlled by the property bsDependencyEnabled within the asset bundle (which defaults to true). One can override this and prevent the default yii2 bootstrap assets (CSS & JS) from loading by doing one or all of the following:

  • Global Override: Set Yii::$app->params['bsDependencyEnabled'] to false in your Yii 2 application config params.php. This setting will be applied for all Krajee Extension Asset Bundles that depend on Bootstrap assets.

    'params' => [
        'bsDependencyEnabled' => false, // this will not load Bootstrap CSS and JS for all Krajee extensions
        // you need to ensure you load the Bootstrap CSS/JS manually in your view layout before Krajee CSS/JS assets
        //
        // other params settings below
        // 'bsVersion' => '5.x',
        // 'adminEmail' => 'admin@example.com'
    ]
    
  • Asset Bundle Specific Override: Set bsDependencyEnabled to false for the specific asset bundle within Yii2 Asset Manager component in your Yii 2 application config file.

    // ...
    'components' => [
        'assetManager' => [
            'bundles' => [
                'kartik\form\ActiveFormAsset' => [
                    'bsDependencyEnabled' => false // do not load bootstrap assets for a specific asset bundle
                ],
            ],
        ],
    ],
    

Note

When setting bsDependencyEnabled to false, you need to ensure that your app code/view layout loads the Bootstrap CSS and JS on your view before the Krajee CSS/JS are loaded to ensure that the Krajee extension JS plugins and CSS styles do not get broken.

Icons for Bootstrap


Bootstrap 5.x / 4.x does not include glyphicons or any other icons framework bundled with the library. Krajee extensions therefore will use Font Awesome 5.x icons instead of glyphicons when working with Bootstrap 5.x / 4.x. You can download Font Awesome 5.x icons from the icons website. Alternatively, you can load the free version of Font Awesome from their CDN.

For Krajee extensions and demos, the Font Awesome Free version is used and loaded as the Icons Display Package on all the Yii2 demo layouts. To include font awesome assets on your page, include the following markup on the HEAD section of your view layout file, when bsVersion is set to 4.x or 5.x.

  • Option 1: Font CSS version of Font Awesome:

    <!-- on your view layout file HEAD section -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css">
    
  • Option 2: SVG / JS version of Font Awesome (recommended for cleaner scaling vector icons and features like icon layers):

    <!-- on your view layout file HEAD section -->
    <script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js" crossorigin="anonymous"></script>
    

    Alternatively, you can use the FontAwesomeAsset from the kartik-v/yii2-icons package to load the SVG/JS version.

    // on your view layout file
    use kartik\icons\FontAwesomeAsset;
    FontAwesomeAsset::register($this);
    

The yii2-popover-x extension can be installed automatically or manually using one of these options:

Composer Package Manager Recommended


Installation via Composer is the recommended and most easy option to install Krajee Yii2 extensions. You can install yii2-popover-x via composer package manager. Either run:

$ php composer.phar require kartik-v/yii2-popover-x "dev-master"

or add:

"kartik-v/yii2-popover-x": "dev-master"

to your application's composer.json file.

Manual Install


You may also manually install the extension to your project (in case your composer install does not work). Just download the source ZIP or TAR ball and extract the extension asset files and folders into your project. You may need to install dependencies manually and also set the namespaces to the extensions in your Yii2 extensions configurations manually.

The PopoverX widget these parameters:
  • bsVersion: string | int, the bootstrap library version to be used for the extension. Refer the Bootstrap Info section for details and pre-requisites on setting this property.

    • To use with Bootstrap library - you can set this to any string starting with 3 (e.g. 3 or 3.3.7 or 4.x / 3.x)

    • To use with bootstrap 4 - you can set this to any string starting with 4 (e.g. 4 or 4.6.0 or 4.x)

    • To use with bootstrap 5 - you can set this to any string starting with 4 (e.g. 5 or 5.1.0 or 5.x)

  • bsColCssPrefixes: array, the bootstrap grid column css prefixes mapping, the key is the bootstrap versions, and the value is an array containing the sizes and their corresponding grid column css prefixes. The class using this trait, must implement kartik\base\BootstrapInterface. If not set will default to:.

    [
       3 => [
          self::SIZE_X_SMALL => 'col-xs-',
          self::SIZE_SMALL => 'col-sm-',
          self::SIZE_MEDIUM => 'col-md-',
          self::SIZE_LARGE => 'col-lg-',
          self::SIZE_X_LARGE => 'col-lg-',
          self::SIZE_XX_LARGE => 'col-lg-',
       ],
       4 => [
          self::SIZE_X_SMALL => 'col-',
          self::SIZE_SMALL => 'col-sm-',
          self::SIZE_MEDIUM => 'col-md-',
          self::SIZE_LARGE => 'col-lg-',
          self::SIZE_X_LARGE => 'col-xl-',
          self::SIZE_XX_LARGE => 'col-xl-',
       ],
       5 => [
          self::SIZE_X_SMALL => 'col-',
          self::SIZE_SMALL => 'col-sm-',
          self::SIZE_MEDIUM => 'col-md-',
          self::SIZE_LARGE => 'col-lg-',
          self::SIZE_X_LARGE => 'col-xl-',
          self::SIZE_XX_LARGE => 'col-xxl-',
       ],
    ];
    
  • type: string, the bootstrap contextual color type for displaying the popover. Defaults to PopoverX::TYPE_DEFAULT. Must be one of the following:

    • PopoverX::TYPE_DEFAULT or 'default'

    • PopoverX::TYPE_PRIMARY or 'primary'

    • PopoverX::TYPE_INFO or 'info'

    • PopoverX::TYPE_SUCCESS or 'success'

    • PopoverX::TYPE_DANGER or 'danger'

    • PopoverX::TYPE_WARNING or 'warning'

  • placement: string, the placement of the popover with respect to the target element. Defaults to PopoverX::ALIGN_RIGHT. Must be one of the following:

    • PopoverX::ALIGN_RIGHT or 'right'

    • PopoverX::ALIGN_LEFT or 'left'

    • PopoverX::ALIGN_TOP or 'top'

    • PopoverX::ALIGN_BOTTOM or 'bottom'

    • PopoverX::ALIGN_TOP_LEFT or 'top top-left'

    • PopoverX::ALIGN_BOTTOM_LEFT or 'bottom bottom-left'

    • PopoverX::ALIGN_TOP_RIGHT or 'top top-right'

    • PopoverX::ALIGN_BOTTOM_RIGHT or 'bottom bottom-right'

    • PopoverX::ALIGN_LEFT_TOP or 'left left-top'

    • PopoverX::ALIGN_LEFT_BOTTOM or 'left left-bottom'

    • PopoverX::ALIGN_RIGHT_TOP or 'right right-top'

    • PopoverX::ALIGN_RIGHT_BOTTOM or 'right right-bottom'

  • size: string, the size of the popover dialog. Offers two other sizes in addition to the default size. Must be one of the following:

    • PopoverX::SIZE_LARGE or 'lg' for large size

    • PopoverX::SIZE_MEDIUM or 'md' for medium size

  • header: string, the header content in the popover dialog.

  • headerOptions: array, the the HTML attributes for the header. The following special options are supported:

    • tag: string, the HTML tag for rendering the header. Defaults to 'div'.

  • content: string, the body content of the popover. You can directly pass this if you do not wish to use the widget with begin and end methods.

  • arrowOptions: array, the the HTML attributes for the arrow. The CSS class and styling for the arrow is automatically usually determined based on the placement property.

  • footer: string, the footer content in the popover dialog.

  • footerOptions: array, the the HTML attributes for the footer. The following special options are supported:

    • tag: string, the HTML tag for rendering the footer. Defaults to 'div'.

  • closeButton: array, the options for rendering the close button tag. The close button is displayed in the header of the modal window. Clicking on the button will hide the modal window. If this is null, no close button will be rendered. The following special options are supported:

    • tag: string, the HTML tag for rendering the rendering the button. Defaults to 'button'.

    • label: string, he label of the button. Defaults to '&times;'.

    The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the PopoverX plugin documentation and the Modal plugin help for the supported HTML attributes.

  • toggleButton: array, the options for rendering the toggle button tag. The toggle button is used to toggle the visibility of the popover dialog. Clicking on the button will hide the modal window. If this property is null, no toggle button will be rendered. The following special options are supported:

    • tag: string, the HTML tag for rendering the rendering the button. Defaults to 'button'.

    • label: string, he label of the button. Defaults to 'Show'.

    The rest of the options will be rendered as the HTML attributes of the button tag. Please refer to the PopoverX plugin documentation and the Modal plugin help for the supported HTML attributes.

  • options: array the HTML attributes for the widget input tag.

  • pluginOptions: array the plugin settings/options for the Bootstrap Popover X Plugin. This will be applied only if you toggleButton property is NULL. There are a quite a few options you can set in this plugin. Refer the plugin options documentation for details.

  • pluginEvents: array the PopoverX JQuery events. You must define events in event-name=>event-function format. All events will be stacked in the sequence. Refer the plugin events documentation for details. For example:

    pluginEvents = [
        "click.target.popoverX"=>"function() { log("click.target.popoverX"); }",
        "load.complete.popoverX"=>"function() { log("load.complete.popoverX"); }",
    ];
    





Basic Popover X with various placements.

Popover X dialog sizes.

Bootstrap contextual Popover X color styles.

Advanced HTML content (forms) and popover footer containing buttons.

Advanced usage of PopoverX inside a bootstrap modal dialog.
use kartik\popover\PopoverX;

$content = '<p class="text-justify">' .
    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' . 
    '</p>';
    
// right
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_RIGHT,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Right', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// left
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_LEFT,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Left', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// top
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_TOP,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Top', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// bottom
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Bottom', 'class'=>'btn btn-default btn-outline-secondary'],
]);

echo '<hr>';

// top left
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_TOP_LEFT,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Top Left', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// bottom left
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_BOTTOM_LEFT,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Bottom Left', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// top right
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_TOP_RIGHT,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Top Right', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// bottom right
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_BOTTOM_RIGHT,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Bottom Right', 'class'=>'btn btn-default btn-outline-secondary'],
]);

echo '<hr>';

// right top
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_RIGHT_TOP,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Right Top', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// right bottom
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_RIGHT_BOTTOM,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Right Bottom', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// left top
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_LEFT_TOP,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Left Top', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// left bottom
echo PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_LEFT_BOTTOM,
    'content' => $content,
    'footer' => Html::button('Submit', ['class'=>'btn btn-sm btn-primary']),
    'toggleButton' => ['label'=>'Left Bottom', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// large
echo PopoverX::widget([
    'header' => 'Hello world',
    'size' => PopoverX::SIZE_LARGE,
    'placement' => PopoverX::ALIGN_RIGHT,
    'content' => $content,
    'toggleButton' => ['label'=>'Large', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// medium
echo PopoverX::widget([
    'header' => 'Hello world',
    'size' => PopoverX::SIZE_MEDIUM,
    'placement' => PopoverX::ALIGN_RIGHT,
    'content' => $content,
    'toggleButton' => ['label'=>'Medium', 'class'=>'btn btn-default btn-outline-secondary'],
]);

// primary
echo PopoverX::widget([
    'header' => 'Hello world',
    'type' => PopoverX::TYPE_PRIMARY,
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'toggleButton' => ['label'=>'Primary', 'class'=>'btn btn-primary'],
]);

// info
echo PopoverX::widget([
    'header' => 'Hello world',
    'type' => PopoverX::TYPE_INFO,
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'toggleButton' => ['label'=>'Info', 'class'=>'btn btn-info'],
]);

// success
echo PopoverX::widget([
    'header' => 'Hello world',
    'type' => PopoverX::TYPE_SUCCESS,
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'toggleButton' => ['label'=>'Success', 'class'=>'btn btn-success'],
]);

// danger
echo PopoverX::widget([
    'header' => 'Hello world',
    'type' => PopoverX::TYPE_DANGER,
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'toggleButton' => ['label'=>'Danger', 'class'=>'btn btn-danger'],
]);

// warning
echo PopoverX::widget([
    'header' => 'Hello world',
    'type' => PopoverX::TYPE_WARNING,
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'toggleButton' => ['label'=>'Warning', 'class'=>'btn btn-warning'],
]);

// advanced html content (forms) with popover footer
use kartik\popover\PopoverX;
use kartik\helpers\Html;
use kartikorm\ActiveForm;
PopoverX::begin([
    'placement' => PopoverX::ALIGN_TOP,
    'toggleButton' => ['label'=>'Login', 'class'=>'btn btn-default btn-outline-secondary'],
    'header' => '<i class="fas fa-lock"></i> Enter credentials',
    'footer' => Html::button('Submit', [
            'class' => 'btn btn-sm btn-primary', 
            'onclick' => '$("#kv-login-form").trigger("submit")'
        ]) . Html::button('Reset', [
            'class' => 'btn btn-sm btn-default', 
            'onclick' => '$("#kv-login-form").trigger("reset")'
        ])
]);
// form with an id used for action buttons in footer
$form = ActiveForm::begin(['fieldConfig'=>['showLabels'=>false], 'options' => ['id'=>'kv-login-form']]);
echo $form->field($model, 'username')->textInput(['placeholder'=>'Enter user...']);
echo $form->field($model, 'password')->passwordInput(['placeholder'=>'Enter password...']);
ActiveForm::end();
PopoverX::end();


// Advanced usage of PopoverX inside a Bootstrap Modal Dialog.
Modal::begin([
	'title' => 'My Modal', 
	'toggleButton' => ['label' => 'Popover inside Modal', 'class' => 'btn btn-primary']
]);
echo '<p>Some custom content above in my modal dialog. Popover can be clicked below to see details:</p>';
echo PopoverX::widget([
    'header' => 'Hello world',
    'type' => PopoverX::TYPE_INFO,
    'placement' => PopoverX::ALIGN_BOTTOM,
    'content' => $content,
    'toggleButton' => ['label'=>'My Popover', 'class'=>'btn btn-info'],
]);
echo '<hr><p>Some more custom content below in my modal dialog.</p>';
Modal::end();
<?php
use kartik\popover\PopoverX;
use kartik\helpers\Html;
?>
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand p-0" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-bs-toggle="collapse" data-target="#navbarColor01"
            aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav mr-auto me-auto">
            <li class="nav-item active">
                <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">Pricing</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#">About</a>
            </li>
        </ul>
        <form class="form-inline">
            <?= PopoverX::widget([
                'header' => 'Hello world',
                'placement' => PopoverX::ALIGN_BOTTOM_RIGHT,
                'size' => 'md',
                'content' => '<p class="text-justify">' .
                    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' .
                    '</p>',
                'footer' => Html::button('Proceed »', ['class' => 'btn btn-sm btn-outline-secondary']),
                'toggleButton' => [
                    'label' => 'Logout ' . Html::tag('span', '',
                            ['class' => 'fas fa-lock']),
                    'class' => 'btn btn-outline-light my-2 my-sm-0'
                ],
                'pluginOptions' => [
                    'dialogCss' => ['z-index' => 1051], // will overlay the popover over the navbar
                ]
            ]) ?>
        </form>
    </div>
</nav>

yii2-popover-x is released under the BSD-3-Clause License. See the bundled LICENSE.md for details.

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Yii2 Demos since 22-May-2017