Category : bootstrap-5

Apologies in advance for the wonky indentation. I have a simple Bootstrap Grid setup like so <div class="row justify-content-center" align="center" id="details"> <div class="col-sm-2"> <div class="card"> <div class="card-body"> <h4><?php echo getDAtimeWorked($envelope); ?></h4> <h5 id=""><?php echo getDArecords($envelope); ?></h5> </div> </div> </div> <div class="col-sm-2"> <div class="card"> <div class="card-body"> <h4><?php echo getTNtimeWorked($envelope); ?></h4> <h5 id=""><?php echo getTNrecords($envelope); ?></h5> </div> ..

Read more

Sometimes you want to include links in the tooltips and make them clickable. Since I did not found any good answer for bootstap 5 and took me some time to figure out I want to share it. The default Bootstrap 5 tooltip initialization looks like this: var tooltipTriggerList = [].slice.call(document.querySelectorAll(‘[data-bs-toggle="tooltip"]’)) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) ..

Read more

I have a simple form with Ajax call, but ajax call gets executed even if form is not validated. In below code line console.log("This line should execute only if Form is validated"); gets executed when form is not validate. Codepen code (function () { "use strict"; const forms = document.querySelectorAll(".requires-validation"); Array.from(forms).forEach(function (form) { form.addEventListener( "submit", ..

Read more

Here is the web app https://script.google.com/macros/s/AKfycbyEHj5qtIeCZh4rR6FutBLQ3N9NihreaTv7BFj4_saOfNWJUG0Tn2OtvzQs4zASYHnNiA/exec Any idea on how could I make it show up the links or hyperlinks some cells have? I have made this web form mainly following a tutorial so I’m somewhat new, I try to understand most of the code but truly it’s quite hard for me so if this ..

Read more

After migration to BS 5 this become broken: <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> <script> $(‘[data-bs-toggle="tooltip"]’).tooltip() </script> When this works normally: <script src="https://code.jquery.com/jquery-3.6.0.js"></script> <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function (event) { (function () { $(‘[data-bs-toggle="tooltip"]’).tooltip() })(); }); </script> This is absent in migration docs, and looks weird for me, so I’m asking : may ..

Read more

Please advise me how could I push specific tag attributes (like class, style, etc.) from tooltip title. To demonstrate the issue here’s my jsFiddle example. Hovering works as hovering onto the table cell text: Apple, and I’m trying to get the tooltip table header in green for example. I assume the solution might be hiding ..

Read more