Sterowanie Bootstrap z wieloma " przełącznikami danych"

Ponieważ tooltip nie jest inicjowany automatycznie, możesz wprowadzić zmiany w inicjalizacji tooltip. Ja swoje zrobiłem tak:

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

Z tym znacznikiem:

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

Zwróć uwagę na data-tooltip.

Update

Lub po prostu

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

Udało mi się rozwiązać ten problem bez konieczności zmiany znaczników za pomocą następującego kawałka jQuery. Miałem podobny problem, gdzie chciałem podpowiedź na przycisk, który był już za pomocą data-toggle dla modalnego. Wszystko, co musisz zrobić, to dodać tytuł do przycisku.

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

Jest to najlepsze rozwiązanie, które właśnie wdrożyłem:

HTML

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

JAVASCRIPT które i tak musisz uwzględnić niezależnie od używanej metody.

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

Jeszcze nie. Zasugerowano jednak, aby ktoś kiedyś dodał tę funkcję.

Poniższe wydanie Bootstrap Github pokazuje doskonały przykład tego, czego pragniesz. Jest to możliwe - ale nie bez napisania własnego kodu obejścia problemu na tym etapie.

Zobacz to... :-)

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

Używam href do wczytania modalu i zostawiam data-toggle dla podpowiedzi:

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

Ponieważ Bootstrap zmusza do inicjalizacji podpowiedzi tylko przez Javascript, zmieniłem data-toggle="tooltip" (ponieważ jest to bezużyteczne) na class="bootstrap-tooltip" i użyłem tego Javascript do inicjalizacji podpowiedzi:

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

I tak mogłem używać atrybutu data-toggle do czegoś innego(np. data-toggle="button").

Tylko dla dopełnienia @Roman Holzner odpowiedz..

W moim przypadku, mam przycisk, który pokazuje tooltip i powinien pozostać wyłączony do dalszych działań. Korzystając z jego podejścia, modal działa nawet jeśli przycisk jest wyłączony, ponieważ jego wywołanie jest poza przyciskiem - jestem w pliku Laravel blade, dla jasności:) {]}

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

Więc jeśli chcesz pokazać modal tylko wtedy, gdy przycisk jest aktywny, powinieneś zmienić kolejność tagów:

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

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

Jeszcze jedno rozwiązanie:

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

Jest ładne rozwiązanie przy użyciu klasy .stretched-link. Button musi mieć klasę .position-relative. Oto pełny przykład pracy:

Podpowiedź musi być dodana do przycisku, w przeciwnym razie jego pozycja będzie nieprawidłowa.

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

Kiedy otwierasz modal na znaczniku i chcesz pokazać tooltip, a jeśli zaimplementujesz tooltip wewnątrz znacznika, pokaże on tooltip w pobliżu znacznika. like this

Sugeruję użycie div poza tagiem i użycie "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>

Próbowałem też użyć

<span></span>

Ale

<a></a> 

Tutaj jesteś:

<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
<a data-bs-toggle="tooltip" title="Example">Some info here</a>
</button>

Jeszcze lepiej, spróbuj zawinąć cały przycisk (który używa popover) z div:

<div data-bs-toggle="tooltip" title="Something">
<button type="button" class="btn btn-danger" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Some word here">
Button label
</button>
</div>

HTML (ejs dianmic web page): jest to tabela lista wszystkich użytkowników i z nodejs wygenerować tabelę. NodeJS provide dinamic " ". po prostu zmień dla dowolnej wartości, takiej jak " 54 "

<span type="button" data-href='/admin/user/del/<%= user.id %>' class="item" 
 data-toggle="modal" data-target="#confirm_delete">
    <div data-toggle="tooltip" data-placement="top" title="Delete" data- 
     toggle="modal">
       <i class="zmdi zmdi-delete"></i> 
    </div>
</span>

<div class="modal fade" id="confirm_delete" tabindex="-1" role="dialog" aria-labelledby="staticModalLabel" aria-hidden="true"
         data-backdrop="static">
  <div class="modal-dialog modal-sm" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticModalLabel">Static Modal</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
      </div>
      <div class="modal-body">
        <p> This is a static modal, backdrop click will not close it. </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
          <form method="POST" class="btn-ok">
            <input  type="submit" class="btn btn-danger" value="Confirm"></input>
        </form>
      </div>
    </div>
  </div>
</div>
<!-- end modal static --> 

JS:

    $(document).ready(function(){
        $('#confirm_delete').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('action', $(e.relatedTarget).data('href'));
        });
    });

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