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/

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