기본 intro.js 툴팁 배치 변경

Question

intro.js를 사용하여 내 웹 사이트 둘러보기를 설정하고 있습니다. 상단에있는 툴팁의 기본 배치 (요소에 연결되지 않은 경우)를 설정하고 싶습니다. 수직 중심 대신 페이지.

직접 설정할 수있는 것처럼 보이지 않지만 CSS를 변경하는 방법이 있습니까? (또는 최후의 수단이긴하지만 소스를 편집하여).

Answer 1

비슷한 것을해야했습니다. 우아하지 않지만 작동합니다.

API 문서에는 onafterchange 메서드가 있습니다. 콜백 함수를 지정하면 단계가 표시 될 때마다 해고됩니다.

툴팁에 대상 요소가있는 경우 콜백의 인수에 해당 요소가 포함됩니다. 도구 설명에 요소가 없으면 인수에 introjsFloatingElement 요소가 포함됩니다. 따라서 해당 요소에서 해당 클래스가 있는지 확인해야합니다. 그렇다면 툴팁 요소의 스타일을 조정할 수 있습니다.

var help = introJs(); 
help.onafterchange(function(targetEl){ 
    targetEl = jQuery(targetEl); 

    // check if it's a floating tooltip (not attached to an element) 
    if(targetEl.hasClass('introjsFloatingElement')){ 

     // adjust the position of these elements 
     jQuery('.introjs-tooltipReferenceLayer').offset({top : 120}); 
     jQuery('.introjs-tooltip').css({ 
      opacity: 1, 
      display: 'block', 
      left: '50%', 
      top: '50%', 
      'margin-left': '-186px', 
      'margin-top': '-91px' 
     }); 
     jQuery('.introjs-helperNumberLayer').css({ 
      opacity: 1, 
      left: '-204px', 
      top: '-109px' 
     }); 
    } 
}); 

// add your steps 
// ... 

help.start(); 

참고 :

• 내가 먼저 onbeforechange을 시도하지만, 작동하지 않았다. 이유를 모르겠다.
• 은 먼저 I 만 introjs-tooltipReferenceLayer 요소를 조정했지만, 중첩 요소 (introjs-helperNumberLayer 및 introjs-툴팁)는 제 1 디스플레이 상에 정확하게 위치되지 않았다. 적절한 스타일링을 얻기 위해 이후의 디스플레이에서 그 요소를 검사해야했습니다.
• intro.js 2.5.0으로 테스트되었습니다. 요소 클래스는 API 사양의 일부가 아니므로이 솔루션이 미래 보장 방법인지는 알 수 없습니다.

Answer 2

intro.js 문서를 살펴 보았습니다. 이 코드 줄을 스크립트에 추가 할 수 있어야합니다.

introJs().setOption("tooltipPosition", "top");