2014-02-11 3 views
6

클릭 할 수있는 팝업을 만들려고합니다. AngularUI에는 팝업 표시를 위해 마우스를 올릴 필요가있는 시간을 나타내는 좋은 방법이 있지만 popover 내부를 클릭 할 수있는 비슷한 지시문이 필요합니다. 내가 mouseleave에 자동으로 사라지기 때문에 나는 이것을 할 수 없다. popover-close-delay와 같은 것을 사용할 수도 있지만 한 번에 하나의 popover 만 열려 있도록하고 싶습니다. 이상적으로는 popover에서 마우스를 가져 가면 부모 요소에서 마우스를 가져 가면 동일하게 작동합니다.각을 클릭하면 마우스 센터 팝업이 생성됩니다.

나는 또한 이것을 발견 할 수는 없지만 그것이 앵글 스트랩과 관련이있을 수 있으며 부트 스트랩 UI와 관련이 없다고 생각됩니다. Create Hoverable popover using angular-ui-bootstrap

여기에 당신이 당신의 자신을 만들어야 할 것 같아요 내 코드

<div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 1</div> 
    <div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 2</div> 
    <div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 3</div> 
    <div style="width:50px" popover="I appeared on mouse enter!" 
    popover-placement="right" popover-trigger="mouseenter" popover-popup-delay=600>Item 4</div> 

http://plnkr.co/edit/moHGYOdmIOE4IFDOICKs?p=preview

+0

만약 내가 원한다면 a. 요소 위에 마우스를 올리면 b. popover가 나타나다. c. popover를 클릭하십시오. 이를 수행하는 유일한 방법은 mouseover 이벤트를 기록하는 div 내에서 popover markup을 사용하는 지시문을 만드는 것입니다. 그렇지 않으면 popover는 호버링 가능한 요소의 마우스 아웃시 사라집니다. – koolunix

답변

1

입니다.

  1. mouseleave 사이에 지연을 추가하고 팝 오버를 닫으면 당신에게 팝 오버 요소 자체에 팝 오버에
  2. 바인드 이벤트를 마우스를 이동하는 시간을 제공 : 당신은 아마이 방법 (편집 tooltip.js를) 원하는 것을 할 수 또한 마우스 위치/마우스 위치 정보를 추적 할 수 있습니다.
  3. 내부에 요소 카운터를 유지하고 마우스 포인터가 증가 할 때마다 마우스를 떼어 내면 감소합니다. 떠나는 지연 후에 카운터가 0 인 경우 툴팁을 마지막으로 닫으십시오.
+0

알맞은 소리입니다. 2 번 항목을 어떻게 성취 할 수 있습니까? – Marianna

+0

bind()와 unbind() 호출을 찾아서 만들고 제거 할 때'tooltip' 요소에서 호출하십시오. –

관련 문제