Birden çok “veri geçişli” önyükleme kontrolü

"Veri değiştirme" ile bir önyükleme denetimine birden fazla olay atamanın bir yolu var mı? Örneğin, "araç ipucu" ve "düğme" geçişine atanmış bir düğme istediğimi varsayalım.
Denenmiş data-toggle = "ipucu düğmesi", ancak yalnızca ipucu çalıştı.

DÜZENLE:

Bu ile kolayca "geçici olarak çözülebilir"

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

Javascript eklemeden veya araç ipucu işlevini değiştirmeden bir kip ve araç ipucu eklemek isterseniz, çevresine bir öğe de ekleyebilirsiniz :

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

Araç ipucu otomatik olarak başlatılmadığından, araç ipucunu başlattığınızda değişiklikler yapabilirsiniz. Benimkini böyle yaptım:

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

bu işaretleme ile:

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

Dikkat edin data-tooltip.

Güncelleme

Ya da sadece,

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

Aşağıdaki jQuery parçası ile herhangi bir biçimlendirme değiştirmek gerek kalmadan bu sorunu çözmeyi başardı. Ben zaten bir mod için veri geçiş kullanarak bir düğme üzerinde bir araç ipucu istedim benzer bir sorun vardı. Burada yapmanız gereken tek şey düğmeye başlık eklemek.

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

Bu yeni uyguladığım en iyi çözüm:

HTML

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

Hangi yöntemi kullanırsanız kullanın, yine de eklemeniz gereken JAVASCRIPT .

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

Henüz değil. Ancak, birisinin bu özelliği bir gün eklemesi önerildi.

Aşağıdaki bootstrap Github sorunu, ne istediğinize dair mükemmel bir örnek gösterir. Ancak bu aşamada kendi geçici kodunuzu yazmadan mümkündür.

Bunu kontrol et... :-)

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

Modal yüklemek ve araç ipucu için veri geçiş bırakmak için href kullanın:

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

Bootstrap sizi yalnızca ipuçlarını Javascript ile başlatmaya zorladığından, data-toggle="tooltip"(daha sonra işe yaramaz olduğu için) olarak değiştirdim class="bootstrap-tooltip"ve araç ipuçlarını başlatmak için bu Javascript'i kullandım:

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

Ve bu yüzden bu data-toggleözelliği başka bir şey (örneğin data-toggle="button") için kullanmakta özgürdüm .

Sadece @Roman Holzner cevabı için ...

Benim durumumda, araç ipucunu gösteren bir düğme var ve daha sonraki eylemlere kadar devre dışı kalmalıdır. Yaklaşımını kullanarak, düğme devre dışı bırakılsa bile çalışır, çünkü çağrısı düğmenin dışındadır - Sadece net olmak için Laravel blade dosyasındayım :)

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

Bu nedenle, modu yalnızca düğme etkinken göstermek istiyorsanız, etiketlerin sırasını değiştirmeniz gerekir:

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

Test etmek istiyorsanız, özelliği bir JQuery koduyla değiştirin:

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

Bir çözüm daha:

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

Sınıfı kullanmanın hoş bir çözümü var .stretched-link. Düğme bir sınıfa sahip olmalıdır .position-relative. İşte tam bir çalışma örneği:

Araç ipucu düğmeye eklenmelidir, aksi takdirde konumu yanlış olur.

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

Bir etikette kip açtığınızda ve araç ipucunu göstermek istediğinizde ve etiketin içine araç ipucu uygularsanız, etiketin yakınında araç ipucu gösterilir. bunun gibi

Ben bir etiket dışında div ve "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>