비활성화 된 버튼에서 부트 스트랩 툴팁을 활성화하는 방법은 무엇입니까?

비활성화 된 버튼에서 부트 스트랩 툴팁을 활성화하는 방법은 무엇입니까?

---

비활성화 된 버튼에 툴팁을 표시하고 활성화 된 버튼에서 툴팁을 제거해야합니다. 현재는 반대로 작동합니다.

이 행동을 뒤집는 가장 좋은 방법은 무엇입니까?

$('[rel=tooltip]').tooltip();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<hr>
<button class="btn" disabled rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>
<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

여기 데모가 있습니다

추신 : disabled속성 을 유지하고 싶습니다 .

---

작동 코드는 다음과 같습니다. http://jsfiddle.net/mihaifm/W7XNU/200/

$('body').tooltip({
    selector: '[rel="tooltip"]'
});

$(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
    {
        $(".disabled").removeClass("disabled").attr("rel", null);

        $(this).addClass("disabled").attr("rel", "tooltip");
    }
});

아이디어는 selector옵션 을 사용하여 툴팁을 부모 요소에 추가 한 다음 rel버튼을 활성화 / 비활성화 할 때 속성 을 추가 / 제거하는 것입니다.

---

비활성화 된 버튼을 래핑하고 툴팁을 래퍼에 넣을 수 있습니다.

<div class="tooltip-wrapper" data-title="Dieser Link führt zu Google">
  <button class="btn btn-default" disabled>button disabled</button>
</div>

랩퍼가 있으면 display:inline툴팁이 작동하지 않는 것 같습니다. 사용 display:block하고 display:inline-block잘 작동하는 것 같습니다. 또한 플로팅 랩퍼에서 잘 작동하는 것으로 보입니다.

업데이트 다음은 최신 부트 스트랩 (3.3.6)에서 작동하는 업데이트 된 JSFiddle입니다. pointer-events: none;비활성화 버튼 을 제안 해 주신 @JohnLehmann에게 감사 합니다.

http://jsfiddle.net/cSSUA/209/

---

이것은 CSS를 통해 수행 할 수 있습니다. "포인터 이벤트"속성은 툴팁이 나타나지 않도록하는 것입니다. 부트 스트랩으로 설정된 "포인터 이벤트"속성을 재정 의하여 비활성화 된 버튼으로 툴팁을 표시 할 수 있습니다.

.btn.disabled {
    pointer-events: auto;
}

---

확인란, 텍스트 상자 등의 툴팁에 필사적 인 경우 필자의 해킹 해결 방법은 다음과 같습니다.

$('input:disabled, button:disabled').after(function (e) {
    d = $("<div>");
    i = $(this);
    d.css({
        height: i.outerHeight(),
        width: i.outerWidth(),
        position: "absolute",
    })
    d.css(i.offset());
    d.attr("title", i.attr("title"));
    d.tooltip();
    return d;
});

실례 : http://jsfiddle.net/WB6bM/11/

그 가치에 대해, 나는 장애인 양식 요소에 대한 툴팁이 UX에 매우 중요하다고 생각합니다. 누군가가 무언가를하지 못하도록 막고 있다면 이유를 말해야합니다.

---

이 해결 방법은 추악합니다. 문제는 부트 스트랩이 CSS 속성 포인터 이벤트를 자동으로 설정한다는 것 입니다.

이 마술 속성은 JS가 CSS 선택기와 일치하는 요소의 이벤트를 처리 할 수 ​​없게합니다.

이 속성을 기본 속성으로 덮어 쓰면 툴팁을 포함하여 모든 것이 매력처럼 작동합니다!

.disabled {
  pointer-events: all !important;
}

그러나 일반적인 선택기를 사용하면 안됩니다 ( 예 : JavaScript 이벤트 전파 ( e.preventDefault () )).

---

비활성화 된 버튼에 툴팁을 표시 할 수 없습니다. 비활성화 된 요소는 툴팁을 포함한 모든 이벤트를 트리거하지 않기 때문입니다. 가장 좋은 방법은 비활성화 된 버튼을 가짜로 만드는 것이므로 비활성화 된 것처럼 보이고 도구 팁을 트리거 할 수 있습니다.

예 : 자바 스크립트 :

$('[rel=tooltip].disabled').tooltip();

$('[rel=tooltip].disabled').bind('click', function(){
     return false;
});

그냥 대신 $('[rel=tooltip]').tooltip();​

HTML :

<hr>
<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

<button class="btn" rel="tooltip" data-title="Dieser Link führt zu Google">button not disabled</button>

JSFiddle : http://jsfiddle.net/BA4zM/75/

---

제 경우에는 위의 해결책 중 어느 것도 효과가 없었습니다. 절대 요소를 사용하여 비활성화 된 버튼을 겹치는 것이 더 쉽다는 것을 알았습니다.

<div rel="tooltip" title="I workz" class="wrap">
  <div class="overlap"></div>
  <button>I workz</button>
</div>

<div rel="tooltip" title="Boo!!" class="wrap poptooltip">
  <div class="overlap"></div>
  <button disabled>I workz disabled</button>
</div>

.wrap {
  display: inline-block;
  position: relative;
}

.overlap {
  display: none
}

.poptooltip .overlap {
  display: block;
  position: absolute;
  height: 100%;
  width: 100%;
  z-index: 1000;
}

데모

---

이 예를보십시오 :

도구 설명은 다음으로 초기화해야합니다 jQuery. 지정된 요소를 선택하고 다음에서 tooltip()메소드를 호출하십시오 JavaScript.

$(document).ready(function () {
    $('[data-toggle="tooltip"]').tooltip();
});

추가 CSS:

.tool-tip {
  display: inline-block;
}

.tool-tip [disabled] {
  pointer-events: none;
}

그리고 당신의 HTML :

<span class="tool-tip" data-toggle="tooltip" data-placement="bottom" title="I am Tooltip">
    <button disabled="disabled">I am disabled</button>
</span>

---

CSS를 통해 비활성화 된 버튼에 대한 부트 스트랩의 "포인터 이벤트"스타일을 간단히 재정의 할 수 있습니다.

.btn[disabled] {
 pointer-events: all !important;
}

여전히 명확하고 특정 버튼을 비활성화하십시오.

#buttonId[disabled] {
 pointer-events: all !important;
}

---

이것이 바로 나 자신과 tekromancr이 생각 해낸 것입니다.

예제 요소 :

<a href="http://www.google.com" id="btn" type="button" class="btn btn-disabled" data-placement="top" data-toggle="tooltip" data-title="I'm a tooltip">Press Me</a>

참고 : 툴팁 속성은 별도의 div에 추가 할 수 있습니다.이 div의 ID는 .tooltip ( 'destroy')를 호출 할 때 사용됩니다. 또는 .tooltip ();

이를 통해 툴팁을 활성화하고 html 파일에 포함 된 모든 자바 스크립트에 넣습니다. 그러나이 줄은 추가하지 않아도됩니다. (툴팁 에이 줄이 표시되지 않으면 포함시키지 않아도됩니다)

$("#element_id").tooltip();

툴팁을 파괴합니다. 사용법은 아래를 참조하십시오.

$("#element_id").tooltip('destroy');

버튼을 클릭 할 수 없게합니다. disabled 속성을 사용하지 않기 때문에이 속성이 필요합니다. 그렇지 않으면 버튼이 비활성화 된 것처럼 "보여"있어도 여전히 버튼을 클릭 할 수 있습니다.

$("#element_id").click(
  function(evt){
    if ($(this).hasClass("btn-disabled")) {
      evt.preventDefault();
      return false;
    }
  });

부트 스트랩을 사용하여 btn 및 btn-disabled 클래스를 사용할 수 있습니다. 자신의 .css 파일에서이를 재정의하십시오. 비활성화되었을 때 원하는 색상이나 버튼 모양을 추가 할 수 있습니다. 커서를 유지하십시오 : 기본값; .btn.btn-success 모양을 변경할 수도 있습니다.

.btn.btn-disabled{
    cursor: default;
}

활성화되는 버튼을 제어하는 ​​자바 스크립트에 아래 코드를 추가하십시오.

$("#element_id").removeClass('btn-disabled');
$("#element_id").addClass('btn-success');
$('#element_id).tooltip('destroy');

툴팁은 이제 버튼이 비활성화 된 경우에만 표시됩니다.

angularjs를 사용하는 경우 원하는 경우 해당 솔루션도 있습니다.

---

부트 스트랩 3.3.6의 작업 코드

자바 스크립트 :

$('body').tooltip({
  selector: '[data-toggle="tooltip"]'
});

$(".btn").click(function(e) {
 if ($(this).hasClass("disabled")){
   e.preventDefault();
 }
});

CSS :

a.btn.disabled, fieldset[disabled] a.btn {
  pointer-events: auto;
}

---

CSS3를 사용하여 효과를 모방 할 수 있습니다.

버튼에서 비활성화 상태를 해제하면 툴팁이 더 이상 표시되지 않습니다. 코드에 로직이 덜 필요하므로 유효성 검사에 좋습니다.

설명하기 위해이 펜을 썼습니다.

CSS3 비활성화 툴팁

[disabled] {
  &[disabled-tooltip] {
    cursor:not-allowed;
    position: relative;
    &:hover {
      &:before {
        content:'';
        border:5px solid transparent;
        border-top:5px solid black;
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -5px));
      }
      &:after {
        content: attr(disabled-tooltip);
        position: absolute;
        left: 50%;
        transform: translate(-50%, calc(-100% + -15px));
        width:280px;
        background-color:black;
        color:white;
        border-radius:5px;
        padding:8px 12px;
        white-space:normal;
        line-height:1;
      }
    }
  }
}

---

<button type="button" class="btn btn-primary" disabled-tooltip="I am a disabled tooltip using CSS3.. You can not click this button." disabled>Primary Button</button>

---

pointer-events: auto;에서 작동하지 않습니다 <input type="text" />.

I took a different approach. I do not disable the input field, but make it act as disabled via css and javascript.

Because the input field is not disabled, the tooltip is displayed properly. It was in my case way simpler than adding a wrapper in case the input field was disabled.

$(document).ready(function () {
  $('.disabled[data-toggle="tooltip"]').tooltip();
  $('.disabled').mousedown(function(event){
    event.stopImmediatePropagation();
    return false;
  });
});

input[type=text].disabled{
  cursor: default;
  margin-top: 40px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.3/js/tether.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"> 
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>


<input type="text" name="my_field" value="100" class="disabled" list="values_z1" data-toggle="tooltip" data-placement="top" title="this is 10*10">

---

For Bootstrap 3

HTML

<button 
    class="btn btn-success" 
    disabled
    data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Submit button
</button>

CSS

button { position:relative; }

.sp-btn-overlap { 
    position:absolute; 
    top:0; 
    left:0; 
    height:100%; 
    width:100%; 
    background:none; 
    border:none; 
    z-index:1900;
}

JS

$('button .sp-btn-overlap')
    .popover({
        trigger: 'hover',
        container: 'body',
        placement: 'bottom',
        content: function() {
            return $(this).parent().prop('disabled')
                    ? $(this).data('hint')
                    : $(this).parent().data('hint');
            }
        });

$('button .sp-btn-overlap')
  .popover({
    trigger: 'hover',
    container: 'body',
    placement: 'bottom',
    content: function() {
      return $(this).parent().prop('disabled')
                  ? $(this).data('hint')
                  : $(this).parent().data('hint'); }
  });

button {
  position:relative; /* important! */
}

.sp-btn-overlap {
  position:absolute;
  top:0;
  left:0;
  height:100%;
  width:100%;
  background:none;
  border:none;
  z-index:1900;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<button disabled class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Disabled button
</button>

<button class="btn btn-default" data-hint="Enabled">
  <div class="sp-btn-overlap" data-hint="Disabled"></div>
  Enabled button
</button>

---

Simply add the disabled class to the button instead of the disabled attribute to make it visibly disabled instead.

<button class="btn disabled" rel="tooltip" data-title="Dieser Link führt zu Google">button disabled</button>

Note: this button only appears to be disabled, but it still triggers events, and you just have to be mindful of that.

참고URL : https://stackoverflow.com/questions/13311574/how-to-enable-bootstrap-tooltip-on-disabled-button