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

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

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

$('[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 () )).

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

<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;
}

데모

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

예 : 자바 스크립트 :

$('[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/

이 예를보십시오 :

도구 설명은 다음으로 초기화해야합니다 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에 추가 할 수 있으며, .tooltip ( 'destroy')를 호출 할 때 해당 div의 ID가 사용됩니다. 또는 .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를 사용하는 경우 원하는 경우 해당 솔루션도 있습니다.

그것이 누군가에게 도움이된다면, 툴팁을 그 안에 스팬을 넣고 거기에 툴팁을 적용하여 툴팁을 표시하는 비활성화 된 버튼을 얻을 수있었습니다 ...

<button ng-click="$ctrl.onClickDoThis()"
        ng-disabled="!$ctrl.selectedStuff.length">
  <span tooltip-enable="!$ctrl.selectedStuff.length"
        tooltip-append-to-body="true"
        uib-tooltip="Select at least one thing to enable button.">
    My Butt
  </span>
</button>

부트 스트랩 4 기반

비활성화 된 요소 disabled 특성이있는 요소는 대화 형이 아니므로 사용자가 포커스를 맞추거나 가리 키거나 클릭하여 툴팁 (또는 팝 오버)을 트리거 할 수 없습니다. 이 문제를 해결하려면 래퍼에서 도구 설명을 트리거하거나 tabindex = "0"을 사용하여 키보드로 포커스를 맞추고 비활성화 된 요소의 포인터 이벤트를 재정의하는 것이 좋습니다.

<span class="d-inline-block" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

여기에 모든 세부 사항이 있습니다 : Bootstrap 4 doc

부트 스트랩 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>

disabled 속성 대신 disabled 클래스를 버튼에 추가하면 대신 시각적으로 비활성화됩니다.

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

참고 : 이 버튼은 비활성화 된 것처럼 보이지만 여전히 이벤트를 트리거하므로주의해야합니다.

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

나는 다른 접근법을 취했다. 입력 필드를 비활성화하지 않지만 CSS 및 자바 스크립트를 통해 비활성화 된 것처럼 작동시킵니다.

입력 필드가 비활성화되어 있지 않기 때문에 툴팁이 올바르게 표시됩니다. 필자의 경우 입력 필드가 비활성화 된 경우 래퍼를 추가하는 것보다 간단합니다.

$(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">

부트 스트랩 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>

마지막으로 "disabled" 앞에 " pointer-events : auto" 를 넣어 Safari에서 적어도이 문제를 해결했습니다 . 역순으로 작동하지 않았습니다.