2013-03-30 6 views
1

내 사이트에 일부 미리보기 이미지가 있습니다. 각 미리보기 이미지의 이름을 표시하기 위해 Twitters Bootstrap 툴팁을 사용합니다. 툴팁을 2 초 동안 말하면서 각각을 반복합니다. 다음으로 갑자기 나타납니다. 나는 이것을 몇 가지 방법으로 시도했지만 아무것도 작동하지 않았다.jQuery를 사용하여 부트 스트랩 툴팁을 영원히 반복 할 수 있습니까?

나는이 정도까지 나왔지만, 작동하지 않았습니다.

$("[rel=tooltip]").each(function (i) { 
     $id=$(this).attr('id'); 
     $($id).tooltip('show'); 
    }); 

여기 내 레이아웃의 JSFiddle입니다 : http://jsfiddle.net/BWR5D/

어떤 아이디어가?

답변

1

는 다음과 같은 시도 :

var ttid = 0, tooltipIds = []; 
$("a[rel=tooltip]").each(function(){ 
    tooltipIds.push(this.id); 
}); 

var iid = setInterval(function(){ 
    if (ttid) $('#'+tooltipIds[ttid-1]).tooltip("hide"); 
    if (ttid === tooltipIds.length) ttid = 0; 
    $('#'+tooltipIds[ttid++]).tooltip("show"); 
}, 2000); 
  • 당신과 함께 게재 툴팁을 중지 할 수 있습니다 clearInterval(iid);
+0

. JSFiddle을 편집하여 작동시킬 수 있습니까? 감사합니다 –

+0

한 줄에 tooltipIds 배열 이름을 잘못 입력했습니다. 코드가 업데이트되었습니다. 여기 그것이 작동합니다 : http://jsfiddle.net/say2joe/BWR5D/5/ –

+0

마지막 바이올린 링크를 무시하십시오. http://jsfiddle.net/say2joe/BWR5D/6/ –

0

현재 열려있는 도구 설명을 숨겨야 다음, 그 다음 보여줍니다. 처음부터 다시 시작하는시기를 결정하는 캐시 된 요소의 길이 대 현재 인덱스를 사용

/* cache elements*/ 
var $els=$("a[rel=tooltip]").tooltip(), index=-1; 

var tipLoop=setInterval(function(){ 
    index++; 
    index = index < $els.length ? index : 0; 
    $els.tooltip("hide").eq(index).tooltip('show');  
},2000) 

DEMO :이 오류를 생산하는 것보다 더 많은 작업을 수행 할 얻이 수없는 것 http://jsfiddle.net/BWR5D/1/

+0

처음 루프가 끝난 후 툴팁이 1 초도 채 안되어 사라지는 것을 방지 할 수있는 방법이 있습니까? –

+0

그 원인을 모르는 경우 부트 스트랩의 버그처럼 보입니다. 올바른 HTML을 사용해보십시오.'div'는''의 유효하지 않은 자식입니다. 또한 사용자가 이미지를 가리킬 때 충돌 문제를 묻지 않고 있는지 확신하지 마십시오. – charlietfl

+0

사용자가 마우스를 가리면 일시 중지했다가 다시 시작하는 것이 좋습니다. div는 현재 자리 표시 자로 만 존재합니다. –

관련 문제