Support » Theme: Bootstrap Basic » Tooltips not displaying

  • Resolved ex1234

    (@ex1234)


    Having a problem getting the tooltips to display correctly. I have installed and have a functioning child theme based on Bootstrap Basic, but the following code fails to produce the expected tooltip display on mouseover:

    <a href="#"
       target="_blank"
       data-toggle="tooltip"
       data-placement="top"
       title="Describe the item here">
       <img src="<?php echo $image[0]; ?>"
            class="img-responsive">
    </a>
Viewing 10 replies - 1 through 10 (of 10 total)
  • Please share the website where you have placed that code. I will guide you accordingly.

    Theme Author vee

    (@okvee)

    Does your child theme loaded the Bootstrap js?

    @codemovement.pk: The site is in a dev area currently and not publicly accessible as yet.

    @vee: I believe that is loaded, yes. I can see the following two lines showing in the footer of the displayed HTML output:

    <script type='text/javascript' src='http://example.com/wp-content/themes/bootstrap-basic/js/vendor/bootstrap.min.js?ver=3.3.6'></script>
    <script type='text/javascript' src='http://example.com/wp-content/themes/bootstrap-basic/js/main.js?ver=4.5.2'></script>
    Theme Author vee

    (@okvee)

    Did you try this in js file?

    jQuery(function () {
      jQuery('[data-toggle="tooltip"]').tooltip()
    })

    I read the Bootstrap doc it said

    For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

    One way to initialize all tooltips on a page would be to select them by their data-toggle attribute:

    Theme Author vee

    (@okvee)

    How is it? Does it works?

    I have the following in my footer.php file:

    <!--wordpress footer-->
    	<?php wp_footer(); ?>
            <script type="text/javascript">
                $(document).ready(function(){
                    $(function () {$('[data-toggle="tooltip"]').tooltip()})
                });
            </script>
        </body>
    </html>
    Theme Author vee

    (@okvee)

    By default WordPress jQuery does not support $.
    Please make sure that your $ is jQuery.

    @vee: you are a superstar! Do you have a bitcoin address I can send some love to?

    <!--wordpress footer-->
    	<?php wp_footer(); ?>
            <script type="text/javascript">
    		jQuery(function () {
    			jQuery('[data-toggle="tooltip"]').tooltip()
    		});
            </script>
        </body>
    </html>

    This caused the tooltips to kick in perfectly.

    Theme Author vee

    (@okvee)

    No, I don’t have bitcoin. I have only Paypal donation which is not real donation. (Paypal banned donation in my country).
    https://wordpress.org/support/topic/info-17?replies=2

    tnx vee for your tip this was also my mistake 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Tooltips not displaying’ is closed to new replies.