Bootstrap ควบคุมด้วย“ data-toggle”

มีวิธีการกำหนดมากกว่าหนึ่งเหตุการณ์ให้กับตัวควบคุมการบูตผ่าน "data-toggle" หรือไม่ ตัวอย่างเช่นสมมติว่าฉันต้องการปุ่มที่มี "คำแนะนำเครื่องมือ" และ "ปุ่ม" สลับที่ได้รับมอบหมาย
Tried data-toggle = "ปุ่มคำแนะนำเครื่องมือ" แต่คำแนะนำเครื่องมือทำงานเท่านั้น

แก้ไข:

นี่เป็น "วิธีแก้ปัญหา" ได้อย่างง่ายดายด้วย

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

หากคุณต้องการเพิ่มmodal และ tooltipโดยไม่ต้องเพิ่ม javascript หรือแก้ไข tooltip function คุณสามารถล้อมองค์ประกอบรอบ ๆ

<span data-toggle="modal" data-target="modal">
    <a data-toggle="tooltip" data-placement="top" title="Tooltip">
      Hover Me           
    </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 อยู่แล้ว สิ่งที่คุณต้องทำที่นี่คือเพิ่มชื่อลงในปุ่ม

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

นี่เป็นทางออกที่ดีที่สุดที่ฉันเพิ่งใช้งาน:

HTML

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

JAVASCRIPT ที่คุณต้องการรวมอยู่แล้วไม่ว่าคุณจะใช้วิธีใด

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

ยัง. อย่างไรก็ตามมีคนแนะนำว่าให้เพิ่มคนนี้ในวันเดียว

ปัญหา bootstrap Github ต่อไปนี้แสดงตัวอย่างที่สมบูรณ์แบบของสิ่งที่คุณต้องการ เป็นไปได้ - แต่ไม่ใช่โดยไม่ต้องเขียนโค้ดวิธีแก้ไขของคุณเองในขั้นตอนนี้

ลองดู ... :-)

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

ฉันใช้ href เพื่อโหลด modal และปล่อย data-toggle สำหรับ tooltip:

<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 คำตอบ ...

ในกรณีของฉันฉันมีปุ่มที่แสดงคำแนะนำเครื่องมือและควรปิดการใช้งานจนกว่าจะดำเนินการเพิ่มเติม ใช้วิธีการของเขา modal ทำงานแม้ว่าปุ่มจะปิดการใช้งานเพราะการโทรอยู่นอกปุ่ม - ฉันอยู่ในไฟล์ 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>

ดังนั้นหากคุณต้องการที่จะแสดง modal เฉพาะเมื่อปุ่มมีการใช้งานคุณควรเปลี่ยนลำดับของแท็ก:

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

.stretched-linkมีวิธีการแก้ปัญหาที่ดีโดยใช้ระดับคือ .position-relativeปุ่มจะต้องมีชั้นเรียน นี่คือตัวอย่างการทำงานที่สมบูรณ์:

เคล็ดลับเครื่องมือจะต้องเพิ่มลงในปุ่มมิฉะนั้นตำแหน่งของมันจะไม่ถูกต้อง

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

เมื่อคุณเปิดคำกริยาบนแท็กและต้องการแสดงคำแนะนำเครื่องมือและถ้าคุณใช้คำแนะนำเครื่องมือภายในแท็กมันจะแสดงคำแนะนำเครื่องมือแท็กใกล้เคียง แบบนี้

ฉันจะแนะนำให้ใช้ div นอกแท็กและใช้"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>