Jump to content

vitalnet

Members
  • Content Count

    8
  • Joined

  • Last visited

Community Reputation

0 Neutral

About vitalnet

  • Rank
    Newbie
  1. I posted my question / bug report separately to stackoverflow and got two helpful answers, one of which seems to work correctly on cross-browser testing. I did multiple tests with with four recent desktop browsers, with iphone safari browser, and with android chrome, and have concluded that the following modification of the change_button function (from the original post) gets rid of the persistent tooltip, at least with my tests: function change_button(button_id, bool_val) { var button_obj = document.getElementById(button_id); button_obj.disabled = bool_val; if (bool_val) { $('#' + button_id).tooltip('hide').tooltip('disable'); } else { $('#' + button_id).tooltip('enable'); } } I posted on github bootstrap site, hope that bootstrap might take the above logic and somehow incorporate into bootstrap so that the tooltip would work correctly by default, not required extra programming. Other buttons lose their tooltip when they get disabled. But in the "button disables itself" case, the tooltip incorrectly persists. To me, that is a bug. At least in the meantime, I think I have a method where I can make the tooltips behave correctly. And maybe my posts will help others running into the same problem. If anyone can find a fault with the improved function, or has any other suggestions, please post. Thanks
  2. Could you please run the following html test case, to help figure out how to make bootstrap 4 tooltip go away when a button is disabled while the tooltip is over the button? All the details concerning my question are in the source code for display when the HTML is displayed. Any help appreciated. Thanks <!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap 4 Tooltip Persists, Looks Terrible</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta http-equiv="Content-Type" content="text/html"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Bootstrap 4 Tooltip Persists, Looks Terrible</h3> <br> "Other button disabled" scenario works fine. <br> First, hover over buttons. Look at tooltips while hovering. <br> Then, click button A to disable button B. Works fine: <br> - Button B is disabled, and no tooltip. <br> - Tooltip still works correctly on button A. <br> <br> <button type="button" id="button_a" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button B" onclick='change_button ("button_b", true);'> Button A </button> <button type="button" id="button_b" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disabled by Button A"> Button B </button> <br> <br> <hr> <br> "Same button disabled" scenario fails. <br> First, hover over Button C. Look at the tooltip. <br> Then, click button C to disable button C. Messes up: <br> - Button C is disabled, so that part is OK. <br> - But Button C tooltip persists, looks terrible. <br> <br> <button type="button" id="button_c" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Disables Button C" onclick='change_button ("button_c", true);'> Button C </button> <button type="button" id="button_d" class="btn btn-primary" data-toggle="tooltip" data-trigger="hover" title="Enables Button C" onclick='change_button ("button_c", false);'> Button D </button> <br> <br> <hr> <br> So if a button is disabled while the cursor is hovering over it, the tooltip persists. <strong> Could you please explain how to make tooltip go away when Button C is disabled? </strong> I would prefer if tooltip went away when Button C disabled, since that is default behavior of bootstrap disabled buttons. And disabled button may later get enabled again, so I do not want to delete title attribute. Basically I want bootstrap to behave the same way as when Button B is disabled. I have looked around and cannot find how to fix this problem, and have tried various things, with no success. There are real instances where a button carries out an action, and then the button needs to be disabled, so I appreciate the help. Thanks </div> <script> $(document).ready(function(){$('[data-toggle="tooltip"]').tooltip();}); function change_button (button_id, bool_val) { var button_obj = document.getElementById (button_id); button_obj.disabled = bool_val; } </script> </body> </html>
  3. I decided to just insert data-html=true into the HTML code. Thanks
  4. I can enable all bootstrap 4 tooltips with: $('[data-toggle="tooltip"]').tooltip(); I can add trigger option as follows: $('[data-toggle="tooltip"]').tooltip({trigger:'hover'}); How do I use several options? I want to enable all tooltips with both trigger:'hover' and html:true options. I tried some things, but it did not work. I know I could insert data-html=true into the HTML code, but it seems better to enable all the tooltips in one place. Thank you
  5. Thanks for the replies. Again, I find shifting all the following text jarring. To me, that is "somewhat obtrusive". It breaks up the main text. And everything shifts. I would not call it a "bug", because it seems to work exactly as designed. But I would suggest it might be the wrong design. Again, to me (and in common usage) a tooltip is a bubble or callout. Again, when entering text into the editor for the w3schools forum, you can hover over the text entry area and see "Enter your text..." as a little box that unobtrusively appears. That is a tooltip. Nothing is shifted. Maybe my comment might help improve w3.css some. Maybe not. At least you have answered my question and I am satisfied.
  6. I'm disappointed not to hear anything back. If I need to clarify my question, please let me know. I thought it was a clearly expressed and helpful post. But beggars cannot be choosers. 😊 In any case, thanks for the incredibly great w3schools website. I have learned a lot through the excellent tutorials and references. And maybe I will eventually hear back.
  7. I have been going through the w3.css documentation and see many things I like. However, the tooltip https://www.w3schools.com/w3css/w3css_tooltips.asp page is different from what I expected. To me, a tooltip is as described on https://en.wikipedia.org/wiki/Tooltip - when you hover over (mouse over) an item a bubble appears with some text in it. Even when writing this post, there is a tooltip saying "Enter your text". But when I hover over "is the capital" in the w3.css tooltip "London is the capital" example, the text "(9 million inhabitants)" instead pushes the following text to the right to occupy some space. It is that "push to the right" part that I do not understand. I am using google chrome 74 and IE 11, both do the same thing. Is there another w3.css class that makes the tooltip with the bubble where the text is not shifted? Any help appreciated.
  8. How popular is w3.css framework currently? In other words, about what percent of websites use it? w3.css seems good, and I like w3schools a lot. Thanks
×
×
  • Create New...