jQueryUI 툴팁이 Twitter 부트 스트랩과 경쟁하고 있습니다

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로 전환하면 충돌없이, 스크립트 가져 오기 순서가 변경되지 않으며, 명시적인 브리지 설명이 필요하지 않은 동일한 효과를 기본적으로 제공했습니다.

---

There is a easy and good solution, just rearrange your bootstrap and jquery ui file link like this:

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

Just load jQueryui before loading boostrap js file. It's work for me.

---

try using jQuery.noConflict() and see if that helps you at all. It looks like bootstrap and jQuery are using the same namespace, and perhaps the bootstrap and jQuery tooltips get loaded into the same function, or one gets loaded first.

You can also check to see which library is loaded first. Usually if you declare the same function twice in javascript the second one is the one that is used.

Thirdly, check the jQueryUI package (on their website) and see if you can download a version that does not have the tooltips included (I checked and this is totally doable).

---

An easy way is to load bootstrap.js after jquery-ui.js, so that the bootstrap .tooltip overrides jquery UI's. If you're using a module loader like requirejs, then you could make bootstrap dependent upon jquery-ui, as such:

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

참고URL : https://stackoverflow.com/questions/13731400/jqueryui-tooltips-are-competing-with-twitter-bootstrap