Điều khiển bootstrap với nhiều dữ liệu chuyển đổi trên mạng

Có cách nào để gán nhiều hơn một sự kiện cho điều khiển bootstrap thông qua "chuyển đổi dữ liệu". Ví dụ: giả sử tôi muốn một nút có "tooltip" và "nút" chuyển đổi được gán cho nó.
Đã thử data-toggle = "nút tooltip", nhưng chỉ có tooltip hoạt động.

BIÊN TẬP:

Điều này dễ dàng "giải quyết được" với

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

Nếu bạn muốn thêm một phương thức và một chú giải công cụ mà không cần thêm javascript hoặc thay đổi chức năng của chú giải công cụ, bạn cũng có thể chỉ cần bọc một phần tử xung quanh nó:

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </a>
</span>

Vì tooltip không được khởi tạo tự động, bạn có thể thực hiện các thay đổi trong quá trình khởi tạo tooltip của mình. Tôi đã làm của tôi như thế này:

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

với đánh dấu này:

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

Hãy chú ý data-tooltip.

Cập nhật

Hoặc đơn giản,

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

Tôi đã quản lý để giải quyết vấn đề này mà không cần phải thay đổi bất kỳ đánh dấu nào với đoạn jQuery sau đây. Tôi gặp vấn đề tương tự khi tôi muốn có một chú giải công cụ trên một nút đã sử dụng chuyển đổi dữ liệu cho một phương thức. Tất cả bạn cần làm ở đây là thêm tiêu đề vào nút.

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

Đây là giải pháp tốt nhất mà tôi vừa thực hiện:

HTML

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

JAVASCRIPT mà dù sao bạn cũng cần bao gồm bất kể bạn sử dụng phương pháp nào.

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

Chưa. Tuy nhiên, một ngày nào đó đã có người đề xuất thêm tính năng này.

Vấn đề Github bootstrap sau đây cho thấy một ví dụ hoàn hảo về những gì bạn đang mong muốn. Có thể - nhưng không phải không viết mã giải pháp của riêng bạn ở giai đoạn này.

Hãy xem thử ... :-)

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

Tôi sử dụng href để tải phương thức và để lại chuyển đổi dữ liệu cho tooltip:

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

Vì Bootstrap buộc bạn chỉ khởi tạo chú giải công cụ thông qua Javascript, nên tôi đã thay đổi data-toggle="tooltip"(vì lúc đó nó vô dụng) class="bootstrap-tooltip"và sử dụng Javascript này để khởi tạo chú giải công cụ của tôi:

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

Và vì vậy tôi được tự do sử dụng data-togglethuộc tính cho thứ khác (ví dụ data-toggle="button").

Chỉ để bổ sung cho câu trả lời @Roman Holzner ...

Trong trường hợp của tôi, tôi có một nút hiển thị chú giải công cụ và nó sẽ vẫn bị vô hiệu hóa cho đến khi có thêm hành động. Sử dụng phương pháp của mình, phương thức hoạt động ngay cả khi nút bị tắt, bởi vì cuộc gọi của nó nằm ngoài nút - Tôi đang ở trong tệp lưỡi kiếm của Laravel, chỉ để rõ ràng :)

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

Vì vậy, nếu bạn chỉ muốn hiển thị phương thức khi nút được kích hoạt, bạn nên thay đổi thứ tự của các thẻ:

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

Nếu bạn muốn kiểm tra nó, hãy thay đổi thuộc tính bằng mã JQuery:

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

Thêm một giải pháp:

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

Có một giải pháp tốt đẹp bằng cách sử dụng lớp .stretched-link. Nút phải có một lớp .position-relative. Dưới đây là một ví dụ hoạt động đầy đủ:

Tooltip phải được thêm vào nút nếu không vị trí của nó sẽ không chính xác.

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

Khi bạn mở phương thức trên thẻ và muốn hiển thị chú giải công cụ và nếu bạn triển khai chú giải công cụ bên trong thẻ, nó sẽ hiển thị chú giải công cụ gần đó. như thế này

Tôi sẽ đề nghị sử dụng div bên ngoài thẻ và sử dụng "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>

<a data-toggle="tooltip" data-placement="top" title="My Tooltip text!">+</a>