비활성화 버튼에서 부트스트랩 툴팁을 활성화하는 방법

비활성화 버튼에서 부트스트랩 툴팁을 활성화하는 방법

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

이 행동을 반전시키는 가장 좋은 방법은 무엇입니까?

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

여기 데모가 있습니다.

P를 보관하고 .disabled여하하다

비활성화 버튼을 랩하고 래퍼에 툴팁을 붙일 수 있습니다.

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

에 음음음음음음음음 if if if가 붙어 있는 display:inline이치「」를 사용합니다.display:block ★★★★★★★★★★★★★★★★★」display:inline-block이치노플로팅된 포장지에서도 정상적으로 동작합니다.

업데이트 최신 부트스트랩(3.3.6)에서 작동하는 업데이트된 JSFiddle을 소개합니다.@해 주셔서 합니다.pointer-events: none;[비활성화] [비활성화]

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

이것은 CSS를 통해 실행할 수 있습니다.포인트 이벤트 속성 때문에 툴팁이 표시되지 않습니다.부트스트랩에 의해 설정된 "pointer-events" 속성을 덮어쓰면 비활성화 버튼을 사용하여 툴팁을 표시할 수 있습니다.

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

확인란, 텍스트 상자 등에 대한 툴팁이 절실한 경우, 다음과 같이 hackey 해결 방법을 제시합니다.

$('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에서는 비활성화된 폼 요소에 대한 툴팁이 매우 중요하다고 생각합니다.만약 당신이 누군가의 행동을 막고 있다면, 그 이유를 말해야 합니다.

다음은 작업 코드입니다.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 추가합니다.relAttribute 버튼 '/'

부트스트랩 4에 의거

사용 안 함 요소 사용 안 함 속성을 가진 요소는 대화식이 아닙니다. 즉, 사용자가 초점을 맞추거나 마우스를 움직이거나 클릭하여 도구 설명(또는 팝오버)을 트리거할 수 없습니다.해결 방법으로는 래퍼 또는 이상적으로 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

이 회피책은 추악합니다.디버깅한 문제는 부트스트랩이 CSS 속성 포인터이벤트를 자동으로 설정하는 것입니다.비활성화된 요소에는 none이 설정되어 있지 않습니다.

이 매직 속성으로 인해 JS는 CSS 셀렉터와 일치하는 요소의 이벤트를 처리할 수 없습니다.

이 속성을 기본 속성으로 덮어쓰면 툴팁을 포함한 모든 것이 마법처럼 작동합니다!

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

단, 이러한 일반 셀렉터를 사용하면 JavaScript 이벤트 전파를 수동으로 중지해야 할 수 있습니다(예: prevent Default()).

다음의 예를 시험해 보겠습니다.

'먹다'로 초기화해야 합니다.jQuery하고 를 합니다.tooltip() in the method in the method in 。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>

제 경우 위의 솔루션 중 어느 것도 효과가 없었습니다.다음과 같이 절대 요소를 사용하여 비활성화된 버튼을 겹치는 것이 더 쉽다는 것을 알게 되었습니다.

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

데모

만약 도움이 된다면, 저는 비활성화된 버튼을 클릭해서 툴팁을 표시할 수 있었습니다.그 안에 스팬을 넣고 툴팁을 적용하기만 하면 됩니다.그 주위에 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>

사용 안 함 단추에 표시할 도구 팁을 얻을 수 없습니다.이는 비활성화된 요소가 툴팁을 포함하여 이벤트를 트리거하지 않기 때문입니다.가장 좋은 방법은 버튼이 비활성화되어 있는 척하는 것입니다(이렇게 하면 비활성화되어 있는 것처럼 보이고 동작합니다).그러면 툴팁을 트리거할 수 있습니다.

예: Javascript:

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

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

instead 가 아니라$('[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/

CSS를 통해 비활성화된 버튼에 대한 Bootstrap의 "포인트 이벤트" 스타일을 덮어쓸 수 있습니다.

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

그래도 명시적으로 특정 버튼을 비활성화하는 것이 좋습니다.

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

이게 나와 테크로만크르가 생각해낸 거야

요소 예:

<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는 .tip'; 또는 .tip()을 호출할 때 사용됩니다.

툴팁을 활성화하고 html 파일에 포함된 Javascript에 저장합니다.단, 이 행을 추가할 필요는 없습니다.(툴팁에 이 행이 표시되지 않는 경우 포함시키지 마십시오.)

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

는 툴팁을 파기합니다.사용방법에 대해서는, 이하를 참조해 주세요.

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

버튼을 클릭할 수 없도록 합니다.비활성화된 Atribute가 사용되지 않기 때문에 이것이 필요합니다.그렇지 않으면 버튼이 비활성화되어 있는 것처럼 "정지"되어도 클릭할 수 있습니다.

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

부트스트랩을 사용하면 클래스 btn과 btn-disabled를 사용할 수 있습니다.사용자 고유의 .css 파일에서 이러한 파일을 덮어씁니다.비활성화 시 버튼의 색상이나 원하는 색상을 추가할 수 있습니다.반드시 커서를 default로 유지합니다.또한 .btn.btn-success의 모양을 변경할 수도 있습니다.

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

버튼을 활성화 하는 것을 제어하는 javascript에 아래 코드를 추가합니다.

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

이제 툴팁은 버튼이 비활성화되어 있을 때만 표시됩니다.

만약 당신이 angularjs를 사용하고 있다면, 원한다면 그에 대한 해결책도 있습니다.

부트스트랩 3.3.6의 동작 코드

Javascript:

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

비활성화된 속성 대신 비활성화된 클래스를 버튼에 추가하면 눈에 띄게 비활성화할 수 있습니다.

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

주의: 이 버튼은 비활성화되어 있을 뿐이지만 여전히 이벤트를 트리거하므로 유의해야 합니다.

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

나는 다른 접근법을 썼다.입력 필드를 비활성화하는 것이 아니라 css와 javascript를 통해 비활성화하는 것입니다.

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

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

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

동적 컨트롤에서도 동일한 문제가 발생했기 때문에 스타일 속성을 설정하고 요소가 비활성화되어 있으면 읽기 전용 속성 = true를 활성화하면 되지만 사용자가 입력 버튼 컨트롤을 클릭하면 툴팁이 표시됩니다.

Yes disabled(예)가 ObBlur, onClick /OnFocus와 같은 모든 이벤트 기능을 중지했습니다.아래 행 대신:

( ( document . get Elment By Name )MYINPUTBTN'. item(0)을 클릭합니다.disabled= 참;

비활성화된 입력 버튼 요소에서 툴팁이 활성화 된 후 아래 코드를 사용할 수 있습니다.

( ( document . get Elment By Name )MYINPUTBTN'. item(0)을 클릭합니다.setAttribute("style", "background-color": #e9ecef;");

b

이것으로 문제가 해결되기를 바랍니다.

요소에서 이벤트를 비활성화하는 css를 덮어씁니다.

add style="filename-filename:unset!important;"

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