public function showJS($options = null, $options_compat = array())
    {
        if (!empty($options_compat)) {
            $options = $options_compat;
        }

        $loader_js = $this->url ?
            $this->js()->atk4_load(array($this->url)) : $options['open_js'] ?: null;

        $this->js(true)->dialog(array_extend(array(
            'modal' => true,
            'dialogClass' => ($options['class'] ?: 'atk-popover').$this->pop_class.
                            ' atk-popover-'.($options['tip'] ?: 'top-center'),
            'dragable' => false,
            'resizable' => false,
            'minHeight' => 'auto',
            'autoOpen' => false,
            'width' => 250,
            'open' => $this->js(null, array(
                $this->js()->_selector('.ui-dialog-titlebar:last')->hide(),
                $loader_js,
            ))->click(
                $this->js()->dialog('close')->_enclose()
            )->_selector('.ui-widget-overlay:last')->_enclose()->css('opacity', '0'),

        ), $options))->parent()->append('<div class="atk-popover-arrow"></div>')
        ;

        return $this->js()->dialog('open')->dialog('option', array(
            'position' => $p = array(
                'my' => $options['my'] ?: 'center top',
                'at' => $options['at'] ?: 'center bottom+8',
                'of' => $this->js()->_selectorThis(),
                //'using'=>$this->js(
                //    null,
                //    'function(position,data){ $( this ).css( position ); console.log("Position: ",data); '.
                //    'var rev={vertical:"horizontal",horizontal:"vertical"}; '.
                //    '$(this).find(".arrow").addClass(rev[data.important]+" "+data.vertical+" "+data.horizontal);}'
                //)
            ),
        ));
    }
public function showJS($options = null, $options_compat = array())
    {
        if (!empty($options_compat)) {
            $options = $options_compat;
        }

        $loader_js = $this->url ?
            $this->js()->atk4_load(array($this->url)) : $options['open_js'] ?: null;

        $this->js(true)->dialog(array_extend(array(
            'modal' => true,
            'dialogClass' => ($options['class'] ?: 'atk-popover').$this->pop_class.
                            ' atk-popover-'.($options['tip'] ?: 'top-center'),
            'dragable' => false,
            'resizable' => false,
            'minHeight' => 'auto',
            'autoOpen' => false,
            'width' => 250,
            'open' => $this->js(null, array(
                $this->js()->_selector('.ui-dialog-titlebar:last')->hide(),
                $loader_js,
            ))->click(
                $this->js()->dialog('close')->_enclose()
            )->_selector('.ui-widget-overlay:last')->_enclose()->css('opacity', '0'),

        ), $options))->parent()->append('<div class="atk-popover-arrow"></div>')
        ;

        return $this->js()->dialog('open')->dialog('option', array(
            'position' => $p = array(
                'my' => $options['my'] ?: 'center top',
                'at' => $options['at'] ?: 'center bottom+8',
                'of' => $this->js()->_selectorThis(),
                //'using'=>$this->js(
                //    null,
                //    'function(position,data){ $( this ).css( position ); console.log("Position: ",data); '.
                //    'var rev={vertical:"horizontal",horizontal:"vertical"}; '.
                //    '$(this).find(".arrow").addClass(rev[data.important]+" "+data.vertical+" "+data.horizontal);}'
                //)
            ),
        ));
    }
public function showJS ( $ options = null , $ options_compat = array ( ) ) { if ( ! empty ( $ options_compat ) ) { $ options = $ options_compat ; } $ loader_js = $ this -> url ? $ this -> js ( ) -> atk4_load ( array ( $ this -> url ) ) : $ options [ 'open_js' ] ? : null ; $ this -> js ( true ) -> dialog ( array_extend ( array ( 'modal' => true , 'dialogClass' => ( $ options [ 'class' ] ? : 'atk-popover' ) . $ this -> pop_class . ' atk-popover-' . ( $ options [ 'tip' ] ? : 'top-center' ) , 'dragable' => false , 'resizable' => false , 'minHeight' => 'auto' , 'autoOpen' => false , 'width' => 250 , 'open' => $ this -> js ( null , array ( $ this -> js ( ) -> _selector ( '.ui-dialog-titlebar:last' ) -> hide ( ) , $ loader_js , ) ) -> click ( $ this -> js ( ) -> dialog ( 'close' ) -> _enclose ( ) ) -> _selector ( '.ui-widget-overlay:last' ) -> _enclose ( ) -> css ( 'opacity' , '0' ) , ) , $ options ) ) -> parent ( ) -> append ( '<div class="atk-popover-arrow"></div>' ) ; return $ this -> js ( ) -> dialog ( 'open' ) -> dialog ( 'option' , array ( 'position' => $ p = array ( 'my' => $ options [ 'my' ] ? : 'center top' , 'at' => $ options [ 'at' ] ? : 'center bottom+8' , 'of' => $ this -> js ( ) -> _selectorThis ( ) , //'using'=>$this->js( //    null, //    'function(position,data){ $( this ).css( position ); console.log("Position: ",data); '. //    'var rev={vertical:"horizontal",horizontal:"vertical"}; '. //    '$(this).find(".arrow").addClass(rev[data.important]+" "+data.vertical+" "+data.horizontal);}' //) ) , ) ) ; }
Returns JS which will position this element and show it.

@param array $options
@param array $options_compat Deprecated options

@return jQuery_Chain
Returns JS which will position this element and show it .