툴팁 속도를 올바르게 사용해야합니까?

Question

[720kb/각형 툴팁] 툴팁의 전환 속도를 0.5 초로 설정하려고합니다. "저속"모드의 기본 속도는 0.65 초 (기본 CSS에서부터)이며 나에게 좋습니다. 0.5 초 대신이 값을 사용할 수 있습니다.

설정 모드를 으로 설정하면으로 변경되지만 아무 것도 변경되지 않습니다.

<a href='#' tooltips tooltip-template="{{n.FileName}}" tooltip-speed="slow"> {{n.FileName}} </a> 

http://jsfiddle.net/u898mg2m/17/

위의 툴팁 속도 속성

을 사용하는 시험입니다

대체 질문 : (쇼 및/또는 숨기기) 툴팁을 지연하는 또 다른 방법이있다?

Answer 1

https://github.com/720kb/angular-tooltips/blob/master/lib/angular-tooltips.scss 자신 만의 새로운 전환 변수를 보거나 정의 할 수 있으므로 다음 .scss에서 값을 변경할 수 있습니다.

느리게는 1을, 고정 변수는 0.5로 설정할 수 있습니다. 지연을 얻으려면 요구 사항에 따라 불투명도 변수를 변경해야합니다. 지연에 따라 백분율을 설정하십시오. 부드럽게 전환하려면 더 작은 불투명도를 사용하십시오. 당신 http://jsfiddle.net/u898mg2m/21/

/* 
* angular-tooltips 
* 1.1.1 
* 
* Angular.js tooltips module. 
* http://720kb.github.io/angular-tooltips 
* 
* MIT license 
* Wed May 18 2016 
*/ 
tooltip._bottom tip tip-arrow,tooltip._top tip tip-arrow{border-left:6px solid transparent;border-right:6px solid transparent;left:50%;margin-left:-6px}._exradicated-tooltip{position:absolute;display:block;opacity:1;z-index:999}tooltip{display:inline-block;position:relative}@-webkit-keyframes animate-tooltip{0%{opacity:0}50%{opacity:0}60%{opacity:0}70%{opacity:0}90%{opacity:0}}@-moz-keyframes animate-tooltip{0%{opacity:0}50%{opacity:0}60%{opacity:0}70%{opacity:0}90%{opacity:1}}@-ms-keyframes animate-tooltip{tooltip 0%{opacity:0}tooltip 50%{opacity:.5}tooltip 60%{opacity:.8}tooltip 70%{opacity:.9}tooltip 90%{opacity:1}}@keyframes animate-tooltip{0%{opacity:0}50%{opacity:0}60%{opacity:0}70%{opacity:0}90%{opacity:1}}tooltip._multiline{display:block}tooltip._slow._ready tip{animation:animate-tooltip 1s}tooltip._fast._ready tip{animation:animate-tooltip 0s}tooltip._steady._ready tip{animation:animate-tooltip .5s}tooltip tip{border-radius:3px;background:rgba(0,0,0,.85);color:#fff;display:none;line-height:normal;max-width:500px;min-width:100px;opacity:0;padding:8px 16px;position:absolute;text-align:center;width:auto;will-change:top,left,bottom,right}tooltip tip._hidden{display:block;visibility:hidden}tooltip.active:not(._force-hidden) tip{display:block;opacity:1;z-index:999}tooltip tip-tip{font-size:.95em}tooltip tip-tip._large{font-size:1.1em}tooltip tip-tip._small{font-size:.8em}tooltip._top tip{left:50%;top:-9px;-webkit-transform:translateX(-50%) translateY(-100%);transform:translateX(-50%) translateY(-100%)}tooltip._top tip tip-arrow{border-top:6px solid rgba(0,0,0,.85);content:'';height:0;position:absolute;top:100%;width:0}tooltip._bottom tip{right:50%;top:100%;-webkit-transform:translateX(50%) translateY(9px);transform:translateX(50%) translateY(9px)}tooltip._bottom tip tip-arrow{border-bottom:6px solid rgba(0,0,0,.85);bottom:100%;content:'';height:0;position:absolute;width:0}tooltip._left tip tip-arrow,tooltip._right tip tip-arrow{border-bottom:6px solid transparent;border-top:6px solid transparent;content:'';height:0;margin-top:-6px;position:absolute;top:50%;width:0}tooltip._right tip{left:100%;top:50%;-webkit-transform:translateX(9px) translateY(-50%);transform:translateX(9px) translateY(-50%)}tooltip._right tip tip-arrow{border-right:6px solid rgba(0,0,0,.85);right:100%}tooltip._left tip{left:-9px;top:50%;-webkit-transform:translateX(-100%) translateY(-50%);transform:translateX(-100%) translateY(-50%)}tooltip._left tip tip-arrow{border-left:6px solid rgba(0,0,0,.85);left:100%}tip-tip #close-button{cursor:pointer;float:right;left:8%;margin-top:-7%;padding:3px;position:relative} 
/*# sourceMappingURL=angular-tooltips.css.map */ 


#link { 
    padding:200px; 
} 

가 당신을 도울 수 있습니다 희망을 위해 여기

는 바이올린입니다.