Yii 2 PopoverX

Latest Stable Version Latest Unstable Version Total Downloads Monthly Downloads Daily Downloads
Thankful to Krajee!
to get more out of us.

NOTE: This extension depends on the kartik-v/yii2-krajee-base extension which in turn depends on the yiisoft/yii2-bootstrap extension. Check the composer.json for this extension's requirements and dependencies that may be updated by composer.

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 3 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.

The preferred way to install this extension is through composer.

Note

You must read this web tip / wiki on setting the minimum-stability settings for your application's composer.json.

Either run:

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

or add:

"kartik-v/yii2-popover-x": "*"

to the require section of your composer.json file. Then run:

php composer.phar update

to get the updated package on your application install.

The PopoverX widget these parameters:

  • 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 '×'.

    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.
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'],
]);

// 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'],
]);

// 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'],
]);

// 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'],
]);

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'],
]);

// 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'],
]);

// 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'],
]);

// 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'],
]);

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'],
]);

// 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'],
]);

// 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'],
]);

// 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'],
]);

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

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

// 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\widgets\ActiveForm;
PopoverX::begin([
    'placement' => PopoverX::ALIGN_TOP,
    'toggleButton' => ['label'=>'Login', 'class'=>'btn btn-default'],
    'header' => '<i class="glyphicon glyphicon-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();

use kartik\popover\PopoverX;
use kartik\helpers\Html;
use yii\bootstrap\NavBar;
use kartik\nav\NavX;

$content = '<p class="text-justify">' .
    'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' . 
    '</p>';
NavBar::begin([
    'brandLabel' => '<img src="' . \Yii::$app->urlManager->createAbsoluteUrl('/frontend/assets/img/krajee-logo.png') . '" width="100%">',
    'brandUrl' => 'http://www.krajee.com/',
    'brandOptions' => ['title' => 'Krajee.com - Web Development Evolved', 'style'=>'width:auto'],
    'options' => [
        'id' => 'top-menu',
        'class' => 'navbar-inverse',
    ],
    'innerContainerOptions' => ['class'=>'kv-container'],
    'renderInnerContainer' => true
]);
$itemsLeft = [
    ['label' => 'Home', 'url' => '#'],
    ['label' => 'Contact', 'url' => '#'],
];
echo NavX::widget(['options' => ['class' => 'navbar-nav'], 'items' => $itemsLeft]);
$userPopover = '<li class="dropdown"><div class="navbar-form">' . PopoverX::widget([
    'header' => 'Hello world',
    'placement' => PopoverX::ALIGN_BOTTOM_RIGHT,
    'size' => 'md',
    'content' => $content,
    'footer' => Html::button('Proceed &raquo;', ['class'=>'btn btn-sm btn-default']),
    'toggleButton' => [
        'label' => 'Logout' . Html::tag('span', '', ['class' => 'glyphicon glyphicon-lock', 'style' => 'padding-left: 10px']),
        'class'=>'btn btn-default'
    ]
]) . '</div></li>';
$itemsRight = [
    ['label' => 'Account', 'url' => '#'],
    '<li class="divider-vertical"></li>',
    '<li>' . $userPopover . '</li>'
];
echo NavX::widget(['options' => ['class' => 'navbar-nav navbar-right'], 'items' => $itemsRight]);
NavBar::end();

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