재단 4 사용자 정의 툴팁

Question

재단의 기본 도구 설명은 다음과 같이 :

나는 내 웹 사이트의 일부에 작은 위쪽 삼각형을 제거하고 싶습니다.

어디서나 제거하려면 foundation_and_overrides.scss 파일 (레일과 함께 기초 보석을 사용하지 않는 경우 _settings.scss라고도 함)에서 $ tooltip-pip-size 변수 값을 0으로 변경해야합니다. .

핍없이 기초 도구 설명의 사용자 정의 버전을 정의 할 수 있습니까?

편집

여기 어려움은 그 나는 실제 툴팁이 포함 된 문서의 끝 부분에 특정 요소를 생성하는 자바 스크립트

<span data-tooltip class="has-tip tip-bottom" title="Here are my tooltip contents!">extended information</span> 

재단 같은 것을 쓸 때 :

<span data-selector="tooltip8vxaud6lxr" class="tooltip tip-bottom" style="visibility: visible; display: none; top: 78px; bottom: auto; left: 50px; right: auto; width: auto;">Here are my tooltip contents!<span class="nub"></span></span> 

을

첫 번째 스팬에 추가 한 팁 하단 클래스가 두 번째 스킨에 복사 된 것을 볼 수 있지만 tip-left, tip-right 등과 같은 기초 특정 클래스의 경우에만 해당됩니다.

내가하고 싶은 것은 첫 번째 범위 (실제로 작성한 유일한)에 "no-pip"클래스를 추가하고 "nub"클래스가 포함 된 생성 된 범위의 모양을 변경할 수 있다는 것입니다. 요소. 작은 삼각형 그냥 span 클래스 nub 당신이해야 할 일을 모두 가진 것을

는

<span data-tooltip class="has-tip tip-bottom no-pip" title="Here are my tooltip contents!">extended information</span> 

Answer 1

다음 '작은 삼각형없이 정상과 동일한 위치에 도구 설명을 것이다 그것에서 CSS border을 제거하는 것입니다

Answer 2

그냥 표시 재산 없음 에

.tooltip > .nub { 
    display: none; 
} 

를 설정하여 숨길

Answer 3

foundationversion 5으로 툴팁 템플릿을 사용자 정의 할 수 있습니다.

$(document).foundation({ 
    tooltip: { 
     tip_template : function (selector, content) { 
     return '<span data-selector="' + selector + '" class="' 
      + Foundation.libs.tooltip.settings.tooltip_class.substring(1) 
      + '">' + content + '<span class="nub"></span></span>'; 
     } 
    } 
    });