[angular-bootstrap] tooltip custom trigger

angularjs-bootstrap tooltip

사용방법 및 api는 아래 사이트 참조. 

https://angular-ui.github.io/bootstrap/#/tooltip

구현하려는 기능은 tooltip을 이용하여 복사버튼을 만들고, 해당버튼을 누르면 copied!라는 툴팁을 출력하여 

복사되었는지를 인지시키고 사라지게 하는 기능 구현. 

tooltip에는 기본적으로 아래와 같은 trigger를 제공하고 있다. 

 var triggerMap = {
    'mouseenter': 'mouseleave',
    'click': 'click',
    'outsideClick': 'outsideClick',
    'focus': 'blur',
    'none': ''
  };

{click:mouseleave} 같은 트리거가 있으면 좋으려만 기본 제공하지 않는다. 

물론 tooltip-is-open 라는 디렉티브를 제공하여 해당 변수값이 true일 경우에만 보여주는 기능을 제공하고 있으나

변수를 선언하고 관리해야하는 번거로움이 생긴다. 

$uibTooltipProvider의 setTriggers(obj)는 function을 제공하는데 이걸 이용하여 기능을 구현할수 있다. 

일단 새로운 trigger를 {show:hide}라는 trigger를 선언하고 directive를 이용하여 mouseleave 이벤트가 발생할 경우 

hide 시켜주는 이벤트를 발생시켜준다. 

소스는 아래와 같다 .

  angular
    .module('beans9')
    .controller('tooltipController', tooltipController)
    .config(['$uibTooltipProvider', function($uibTooltipProvider){
        $uibTooltipProvider.setTriggers({
            'show': 'hide'
        });
      }])
    .directive('tooltipHide',function($timeout){
      return {
        link:function(scope,element,attrs){
          if (attrs.uibTooltip) {
            element.on('click',function(){
              element[0].dispatchEvent(new Event('show'));
            });
            element.on('mouseleave',function(){
              if( scope.$$childHead.isOpen === true ){
                element[0].dispatchEvent(new Event('hide'));
              }
            });
          }
        }
      };
    });

module과 controller는 각자 환경에 맞게 구현하고 tooltipHide라는 directive를 만들어 주었다. 

html은 아래와 같다. 

<button uib-tooltip="copied!" tooltip-trigger="show" tooltip-hide>tooltip click event</button>

클릭하면 툴팁을 보여주고 마우스를 버튼에서 벗어나게 하면 툴팁이 사라진다. 

$uibTooltipProvider.setTriggers({'click':'mouseleave'}) 라고 해주면 간단하게 해결되긴 하지만 공통적으로 적용되기 때문에 

기존 click:click이벤트가 사라지게 된다. 위에 소스를 조금만 응용하면 몇초후에 바로 사라지게도 할수있을듯.

실제 구현소스는 아래 plnkr에서 확인 가능하다