$(document).ready(function(){

    $('[data-toggle="tooltip"]').tooltip({

      //delay: { "show": 400, "hide": 400 }

    }).colortips();

});

​

/*

<!-- Generated markup by the plugin -->

<div class="tooltip bs-tooltip-top" role="tooltip">

  <div class="arrow"></div>

  <div class="tooltip-inner">

    Some tooltip text!

  </div>

</div>

*/

​

(function($) {

    $.fn.colortips = function( options ) {

        /*

        var settings = $.extend({

            text         : 'Hello, World!',

            color        : null,

            fontStyle    : null

        }, options);

        */

        return this.each(function() {

          var tt = $(this);

          tt.on('focus mouseenter', function(){

            var bc = tt.css('background-color');

            var tc = (tt.data('color')===undefined || tt.data('color')==='') ? '' : tt.data('color');

            var pt = tt.data('placement');

            $('.bs-tooltip-bottom.show .tooltip-inner').css({

              'background-color': bc,

              'color': tc

            });

            $('<style id="colortips-style">.bs-tooltip-bottom.show .arrow::before{border-'+pt+'-color: '+bc+';}</style>')

              .appendTo('head');

          }).on('focusout mouseleave', function(){

            $('.bs-tooltip-bottom.show .tooltip-inner').css({

              'background-color': '',

              'color': ''

            });

            $('#colortips-style').remove();

          });

        });

    }

}(jQuery));