Title: Bootstrap JS Tooltip
Last modified: August 30, 2016

---

# Bootstrap JS Tooltip

 *  Resolved [Darío Orlando Fernández](https://wordpress.org/support/users/soykatorce/)
 * (@soykatorce)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/bootstrap-js-tooltip/)
 * I’m trying to use Bootstrap JS Tooltip with some custom options
    See a test page
   at
    - [http://galerialife.com/acp/tooltip/](http://galerialife.com/acp/tooltip/)
 * The body code is
 *     ```
       <div class="container">
       <h3>Tooltip CSS Example</h3>
       <ul class="list-inline">
       	<li><a class="test" title="Hooray!" href="#" data-toggle="tooltip" data-placement="top">Top</a></li>
       	<li><a class="test" title="Hooray!" href="#" data-toggle="tooltip" data-placement="bottom">Bottom</a></li>
       	<li><a class="test" title="Hooray!" href="#" data-toggle="tooltip" data-placement="left">Left</a></li>
       	<li><a class="test" title="Hooray!" href="#" data-toggle="tooltip" data-placement="right">Right</a></li>
       </ul>
       </div>
       <script>// <![CDATA[
       $(document).ready(function(){
           $('[data-toggle="tooltip"]').tooltip();
       });
       // ]]></script>
       ```
   
 * On my child them CSS I added
 *     ```
       /* Tooltip */
         .test + .tooltip > .tooltip-inner {
             background-color: #8AC007;
             color: #FFFFFF;
             border: 1px solid green;
             padding: 15px;
             font-size: 20px;
         }
         /* Tooltip on top */
         .test + .tooltip.top > .tooltip-arrow {
             border-top: 5px solid green;
         }
         /* Tooltip on bottom */
         .test + .tooltip.bottom > .tooltip-arrow {
             border-bottom: 5px solid blue;
         }
         /* Tooltip on left */
         .test + .tooltip.left > .tooltip-arrow {
             border-left: 5px solid red;
         }
         /* Tooltip on right */
         .test + .tooltip.right > .tooltip-arrow {
             border-right: 5px solid black;
         }
       ```
   
 * But it does’nt work.
 * Also tried to add a function Rocco posted somewhere
 *     ```
       // Tooltips
       if ( class_exists('MCI_footnotes') ):
         function re_enqueue_footnotes_script() {
           // first dequeue it
           wp_dequeue_script('mci-footnotes-js-jquery-tools');
           // enqueue it after tc-scripts
   
           wp_enqueue_script('mci-footnotes-js-jquery-tools', plugins_url() . '/footnotes/js/jquery.tools.min.js', array('tc-scripts') );
         }
         add_action( 'wp_print_scripts', 're_enqueue_footnotes_script', 100 );
       endif;
       ```
   
 * But not sure if it applies to my situation.
 * Any help appreciated
    Dario

The topic ‘Bootstrap JS Tooltip’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/customizr/4.4.24/screenshot.png)
 * Customizr
 * [Support Threads](https://wordpress.org/support/theme/customizr/)
 * [Active Topics](https://wordpress.org/support/theme/customizr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/customizr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/customizr/reviews/)

 * 0 replies
 * 1 participant
 * Last reply from: [Darío Orlando Fernández](https://wordpress.org/support/users/soykatorce/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/bootstrap-js-tooltip/)
 * Status: resolved