Locate the button separately from the content pop-up window for use at NavBar

[Nickolay911]

Hi.

I had to use popup after clicking on fixed NavBar element.
like this: https://yadi.sk/i/9H9A25l2c6RpM

The default implementation does not allow me to do it. What I changed:

/basic/vendor/kartik-v/bootstrap-popover-x/css/bootstrap-popover-x.css
add fixed position

 .popover {
    position: fixed;
     padding: 0;
 }
body.modal-open .navbar {
    padding-right: 17px !important;
}

/basic/vendor/kartik-v/bootstrap-popover-x/js/bootstrap-popover-x.js
change getPosition function

         getPosition: function () {
             var $element = this.$target;
            return {
                left: $element.offset().left - $(document).scrollLeft(),
                top: $element.offset().top - $(document).scrollTop(),
                width: $element[0].offsetWidth,
                height: $element[0].offsetHeight
            };
         },

basic/vendor/kartik-v/yii2-popover-x/PopoverX.php
add $arrowOptions for arrow setting

public $arrowOptions;

change init funcntion to

    public function init()
    {
        parent::init();
        $this->initOptions();
        echo $this->renderToggleButton() . "\n";
        echo Html::beginTag('div', $this->options) . "\n";
        $arrowTagOptions = ['class' => 'arrow'];
        if (isset($this->arrowOptions) && is_array($this->arrowOptions)) $arrowTagOptions = array_merge ($arrowTagOptions, $this->arrowOptions);
        echo Html::tag('div', '', $arrowTagOptions);
        echo $this->renderHeader() . "\n";
        echo $this->renderBodyBegin() . "\n";
    }

remove registerPlugin from registerAssets function

    public function registerAssets()
    {
        $view = $this->getView();
        PopoverXAsset::register($view);
    }

After these revisions, in my narrow problem everything is working correctly and to use these modules so I can now:

    $userPopover = PopoverX::begin([
        'header' => 'Hello world',
        'placement' => PopoverX::ALIGN_BOTTOM,
        'arrowOptions' => ['style' => 'left: 70%'],
    ]);
        echo '<p class="text-justify">' .
        'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.' .
        '</p>';
        echo Html::beginTag('div', ['class' => 'align-right']);
        echo Html::a('Выход', ['logout'], ['class' => 'btn btn-small btn-default']);
        echo Html::endTag('div');
    PopoverX::end();


    NavBar::begin([
        'brandLabel' => 'Admin',
        'brandUrl' => Yii::$app->homeUrl,
        'brandOptions' => ['class' => 'navbar-custom'],
        'options' => [
            'class' => 'navbar-custom navbar-fixed-top',
        ],
    ]);
    echo Nav::widget([
        'options' => ['class' => 'navbar-nav navbar-right'],
        'encodeLabels' => false,
        'items' => [
            ['label' => 'Home', 'url' => ['site/first']],
            ['label' => 'About', 'url' => ['/site/about']],
            ['label' => 'Contact', 'url' => ['/site/contact']],
            Yii::$app->user->isGuest ?
                ['label' => 'Login', 'url' => ['/site/login']] :
                ['label' => 'Logout (' . Yii::$app->user->identity->username . ')',
                    'url' => ['/site/logout'],
                    'linkOptions' => ['data-method' => 'post']
                ],
            '<li class="divider-vertical"></li>',
            [
                'label' => 'Nickolay911' . Html::tag('span', '', ['class' => 'glyphicon glyphicon-lock', 'style' => 'padding-left: 10px']),
                'options' => ['class' => 'padding-right-20', 'data-toggle' => 'popover-x', 'data-target' => '#' . $userPopover->options['id'], 'data-placement' => 'bottom']
            ],
        ],
    ]);
    NavBar::end();

Maybe for you it will be interesting.
Regards.

[kartik-v]

I see your details... will check and probably see how this can be merged. Thanks.

[kartik-v]

The plugin and this extension has both been upgraded to release v1.1.0.

You can achieve your use case in a much straight forward way.

Refer docs and demos which also includes an updated example for usage with Navbar

[Nickolay911]

Many thanks you for your work!