jQueryUI 툴팁이 Twitter 부트 스트랩과 경쟁합니다

나는 일 몇 가지 도구 설명 얻을 수 있었다 마지막으로 다음 코드를 :

<a href="#" rel="tooltip" title="Tool tip text here">Hover over me</a>

그리고

<script>
    $('[rel=tooltip]').tooltip();
</script>

내가 겪고있는 문제는 부트 스트랩 대신 jQueryUI 툴팁 (화살표, 큰 추악한 툴팁)을 사용하고 있다는 것입니다.

jQueryUI 대신 부트 스트랩 툴팁을 사용하려면 어떻게해야합니까?

jQuery UI와 Bootstrap tooltip은 모두 플러그인 이름을 사용합니다. 사용 $.widget.bridge(이용하려고 jQuery를 UI 버전에 대한 다른 이름을 생성하고 부트 스트랩라는 툴팁을 유지하는 플러그인 수 있도록 noConflict제대로 작동하지 않기 때문에 위젯 단지 오류가 많이 발생 부트 스트랩에 옵션을, 그 문제는 여기에보고 된 바있다 ) :

// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);

그래서 그것을 작동시키는 코드 :

// Import jQuery UI first
<script src="/js/jquery-ui.js"></script>
// Resolve name collision between jQuery UI and Twitter Bootstrap
$.widget.bridge('uitooltip', $.ui.tooltip);
// Then import bootstrap
<script src="js/bootstrap.js"></script>

버튼 충돌을 처리하는 멋진 복사 붙여 넣기 코드 :

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>
/*** Handle jQuery plugin naming conflict between jQuery UI and Bootstrap ***/
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);
</script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

간단한 해결책은 jquery-ui.js 다음에 bootrap.js를로드하여 bootstrap .tooltip 메소드가 우선하도록하는 것입니다.

이것은 나를 위해 일했다 :

JQuery-UI를 사용해야하지만 부트 스트랩의 툴팁을 사용하려면이 웹 사이트 에서 사용자 정의 된 JQuery-UI 버전을 얻으십시오 .

"도구 설명"옵션을 선택 해제하고 다운로드하십시오 ( "jquery-ui-1.10.4.custom.js"와 같은 것임).

현재 사용중인 버전 대신 프로젝트에 추가하면 파티 준비가 완료됩니다. 이것은 충돌을 피할 것입니다. 그것은 나에게 매력처럼 작동했습니다!

혹시로드해야합니다 jquery-ui.js후 bootstrap.js여기에이 방법으로 할 수 있습니다 :

<script type="application/javascript" src="/js/jquery.js"></script>
<script type="application/javascript" src="/js/bootstrap.js"></script>

<script>var _tooltip = jQuery.fn.tooltip;</script>
<script type="application/javascript" src="/js/jquery-ui.js"></script>
<script>jQuery.fn.tooltip = _tooltip;</script>

이것은 jquery-ui의 툴팁을 무시하고 항상 부트 스트랩을 사용합니다.

부트 스트랩이 초기화 된 후 UI가 호출된다고 가정

UI가 초기화되기 직전에 부트 스트랩 기능을 저장하십시오.

jQuery.fn.bstooltip = jQuery.fn.tooltip; 

그런 다음 다음과 같이 호출하십시오.

$('.targetClass').bstooltip();

이 솔루션 은 저에게 잘 작동하는 것 같습니다.

// handle jQuery plugin naming conflict between jQuery UI and Bootstrap
$.widget.bridge('uibutton', $.ui.button);
$.widget.bridge('uitooltip', $.ui.tooltip);

대신 부트 스트랩 팝 오버를 사용하는 것은 어떻습니까? BS popover는 동일한 tooltip.js 구성 요소가 필요하지만 동일한 충돌을 일으키지 않습니다. 예, 더 양식화되어 있지만 JQuery UI 버튼이 불안 정해지지는 않습니다.

사용자 정의 자동 완성 / 콤보 상자에만 Jquery UI를 사용하고 있으므로 다른 JQ-UI 컨트롤은 괜찮다고 주장 할 수 없으며 위의 어느 것도 BS 툴팁을 호출 할 때 콤보 상자 버튼의 CSS 문제를 "스타일이 지정되지 않은"것으로 수정하지 못했습니다. BS Popovers로 전환하면 충돌없이, 스크립트 가져 오기 순서가 변경되지 않으며, 명시적인 브리지 문이 필요하지 않은 동일한 효과를 기본적으로 제공했습니다.

jQuery.noConflict ()를 사용하여 도움이되는지 확인하십시오. 부트 스트랩과 jQuery가 동일한 네임 스페이스를 사용하는 것처럼 보이고 아마도 부트 스트랩과 jQuery 툴팁이 동일한 기능에로드되거나 하나가 먼저로드됩니다.

어떤 라이브러리가 먼저로드되었는지 확인할 수도 있습니다. 일반적으로 자바 스크립트에서 동일한 함수를 두 번 선언하면 두 번째 함수가 사용됩니다.

셋째, 웹 사이트 에서 jQueryUI 패키지를 확인하고 툴팁이 포함되지 않은 버전을 다운로드 할 수 있는지 확인하십시오 (확인하고 완전히 수행 가능합니다).

쉽고 좋은 해결책이 있습니다. 부트 스트랩과 jquery ui 파일 링크를 다음과 같이 재 배열하십시오.

 <script src="/js/jquery-ui.min.js" type="text/javascript"></script>
 <script src="/js/bootstrap.min.js" type="text/javascript"></script>

boostrap js 파일을로드하기 전에 jQueryui를로드하십시오. 그것은 나를 위해 일하고 있습니다.

쉬운 방법은 jquery-ui.js 다음에 bootstrap.js를로드하여 bootstrap .tooltip이 jquery UI를 재정의하는 것입니다. requirejs와 같은 모듈 로더를 사용하는 경우 부트 스트랩을 jquery-ui에 따라 다음과 같이 만들 수 있습니다.

requirejs.config({
    baseUrl: 'js',
    waitSeconds: 30,
    shim: {
        'bootstrap': {
            deps: [ 'jquery', 'jquery-ui' ]
        },...