nohros / nsPopover

Popover dialogs for angularjs applications.
MIT License
126 stars 107 forks source link

nsPopover misplaced tooltip rectangle (with triangle) in first click #112

Open emenezes opened 8 years ago

emenezes commented 8 years ago

Hi folks, I started using your module yesterday in a project where the main component library is angular-material. I´m using it to make guided tutorial in my app. All went well until I started testing, the first popover was being misplace by a few dozen px. After dismissal, the second click started to position it right. I solved modifying the function bellow. On the second click the getBoundingClientRect result is different from the first one as if it was not "compiled" at first so the size was unknown. Any thoughts?

Changed Function

            display: function(delay, e) {
              .... ....
                $popover.isOpen = true;
                $popover.css('display', 'block');

                // position the popover accordingly to the defined placement around the
                // |elm|.
                var elmRect = getBoundingClientRect(elm[0]);

                // If the mouse-relative options is specified we need to adjust the
                // element client rect to the current mouse coordinates.
                if (options.mouseRelative) {
                  elmRect = adjustRect(elmRect, options.mouseRelativeX, options.mouseRelativeY, e);
                }
                /* ************ CHANGES START HERE ****************** */
//put the popover on screen to avoid getBoundingClientRect mistake on fist popover appearance
                $popover 
                  .css('top', elmRect.top.toString() + 'px')
                  .css('left', elmRect.left.toString() + 'px');
                /* ************ CHANGES END HERE ****************** */
                move($popover, placement_, align_, elmRect, $triangle);
             ... ... ...  
            }

How I used the directive

<script type="text/ng-template" id="templateId">
<div class="triangle"></div>
<div class="ns-popover-tooltip">Cool! The <b>nsPopover</b> could be used as a tooptip.</div>
</script>
<md-input-container class="md-block" flex-gt-xs="50" 
                ns-popover="$ctrl.canChangePassword" 
                ns-popover-template="templateId"
                ns-popover-theme="ns-popover-tooltip-theme"
                ns-popover-placement="top"
                ns-popover-timeout="-1">
        <label> Nova Senha </label>
        <input name="password"  ng-model="$ctrl.user.password" type="password" required>
</md-input-container>