여러 "데이터 토글"을 사용한 부트 스트랩 제어

여러 "데이터 토글"을 사용한 부트 스트랩 제어

---

"data-toggle"을 통해 하나 이상의 이벤트를 부트 스트랩 제어에 지정하는 방법이 있습니까? 예를 들어, "툴팁"과 "버튼"토글이 할당 된 버튼을 원한다고 가정하겠습니다.
data-toggle = "tooltip button"을 시도했지만 툴팁 만 작동했습니다.

편집하다:

이것은 쉽게 "해결 가능"

$("#newbtn").toggleClass("active").toggleClass("btn-warning").toggleClass("btn-success");

---

당신이 추가 할 경우 모달 및 툴팁 자바 스크립트를 추가하거나 툴팁 기능을 변경하지 않고를, 당신은 또한 단순히 주위 요소를 래핑 수 :

<span data-toggle="modal" data-target="#id">
    <a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>
</span>

---

툴팁은 자동으로 초기화되지 않으므로 툴팁 초기화를 변경할 수 있습니다. 나는 이것을 이렇게했다 :

$(document).ready(function() {
    $('body').tooltip({
        selector: "[data-tooltip=tooltip]",
        container: "body"
    });
});

이 마크 업으로 :

<button type="button" data-target="#myModal" data-toggle="modal" data-tooltip="tooltip" class="btn btn-info" title="Your tooltip">Text here</button>

를 확인하십시오 data-tooltip.

최신 정보

아니면 간단히

$('[data-tooltip="tooltip"]').tooltip();

---

다음 jQuery로 마크 업을 변경할 필요 없이이 문제를 해결할 수있었습니다. 이미 모달에 데이터 토글을 사용하고있는 버튼의 툴팁을 원했던 비슷한 문제가있었습니다. 여기서해야 할 일은 버튼에 제목을 추가하는 것입니다.

$('[data-toggle="modal"][title]').tooltip();

---

아직. 그러나 누군가이 기능을 언젠가 추가 할 것을 제안했습니다.

다음 부트 스트랩 Github 문제는 원하는 것을 완벽하게 보여줍니다. 이 단계에서 해결 방법 코드를 작성하지 않아도 가능합니다.

확인 해봐... :-)

https://github.com/twitter/bootstrap/issues/7011

---

이것이 방금 구현 한 최상의 솔루션입니다.

HTML

<a data-toggle="tooltip" rel="tooltip" data-placement="top" title="My Tooltip text!">Hover over me</a>

사용하는 방법에 관계없이 포함해야 할 JAVASCRIPT .

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

---

href를 사용하여 모달을로드하고 툴팁에 대한 데이터 토글을 남겨 둡니다.

<a 
    data-toggle="tooltip"
    data-placement="top"
    title="My Tooltip text!"
    href="javascript:$('#id').modal('show');"
>
+
</a>

---

Bootstrap은 Javascript를 통해서만 툴팁을 초기화하도록 강요하기 때문에 data-toggle="tooltip"(필요하지 않기 때문에) class="bootstrap-tooltip"이 Javascript로 변경하여 툴팁을 초기화했습니다.

$('.bootstrap-tooltip').tooltip();

그래서 나는 data-toggle다른 것 (예 :)에 대한 속성을 자유롭게 사용할 수있었습니다 data-toggle="button".

---

@Roman Holzner의 답변을 보완하기 위해 ...

필자의 경우 툴팁을 표시하는 버튼이 있으며 추가 작업이있을 때까지 비활성화되어 있어야합니다. 그의 접근 방식을 사용하면 버튼이 비활성화 된 경우에도 모달이 작동합니다. 전화가 버튼 외부에 있기 때문에-Laravel 블레이드 파일에 있습니다.

<span data-toggle="modal" data-target="#confirm-delete" data-href="{{ $e->id }}">
    <button name="delete" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

따라서 버튼이 활성화되어있을 때만 모달을 표시하려면 태그 순서를 변경해야합니다.

<span data-toggle="tooltip" data-placement="bottom" title="Excluir Entrada" disabled>
    <button name="delete" class="btn btn-default" data-href="{{ $e->id }}" data-toggle="modal" data-target="#confirm-delete" disabled>
        <i class="fa fa-trash fa-fw"></i>
    </button>
</span>

테스트하려면 JQuery 코드로 속성을 변경하십시오.

$('button[name=delete]').attr('disabled', false);

---

하나 더 해결책 :

    <a data-toggle="modal" data-target="#exampleModalCenter">
      <span
        class="tags"
        data-toggle="tooltip"
        data-placement="right"
        title="Tooltip text"
      >
        Text
     </span>
   </a>

---

There is a nice solution using class .stretched-link. Button must have a class .position-relative. Here is a full working example:

Tooltip must be added to the button otherwise its position will be incorrect.

$('[data-toggle="tooltip"]').tooltip();

/*DEMO*/.btn{margin-left:5rem;margin-top:5rem}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<!--BUTTON-->
<button class="btn btn-primary position-relative" data-toggle="tooltip" data-trigger="hover" data-placement="left" title="Tooltip text">
    <span class="stretched-link" data-toggle="modal" data-target="#exampleModal"></span>
    Click Me!
</button>

<!--DEMO MODAL-->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"><div class="modal-dialog" role="document"><div class="modal-content"><div class="modal-header"><h5 class="modal-title" id="exampleModalLabel">Modal title</h5><button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button></div><div class="modal-body">Modal body</div></div></div></div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>

---

When you opening modal on a tag and want show tooltip and if you implement tooltip inside tag it will show tooltip nearby tag. like this

I will suggest that use div outside a tag and use "display: inline-block;"

<div data-toggle="tooltip" title="" data-original-title="Add" style=" display inline-block;">
    <a class="btn btn-primary" data-toggle="modal" data-target="#myModal" onclick="setSelectedRoleId(6)">
     <span class="fa fa-plus"></span>
    </a>
</div>

참고URL : https://stackoverflow.com/questions/16402390/bootstrap-control-with-multiple-data-toggle