How to change Bootstrap style before it is shown?

I've been trying to manipulate the bootstrap tooltip's positioning without success.

Attempt #1:

<!-- language: lang-js -->

stuff.tooltip({
    container: 'body',
	placement: function(tip, el) {
		// played with tip, but it still add style: top, left at the end...
	}
});

Attempt #2:

<!-- language: lang-js -->

stuff.tooltip({
    container: 'body',
	placement: 'top'
}).on("show.bs.tooltip", function() {
	// don't have access of the tip here
});

Attempt #3:

<!-- language: lang-js -->

stuff.tooltip({
    container: 'body',
	placement: 'top'
}).on("shown.bs.tooltip", function() {
	// doing anything to the tip at this point would cause visible change
});

Any ideas?

Handling with CSS

The best case scenario is you can style tooltips exclusively with CSS that is written ahead of time. As long as you don't need to dynamically change the style of the tooltip based on information only available at runtime. The CSS will immediately apply to elements inserted into the DOM without the FOUC problem.

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(function () {

  $('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    placement: 'bottom'
  });
  
});

<!-- language: lang-css -->

.tooltip .tooltip-inner {
  background-color: yellow;
  color: black;
}

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<button type="button" class="btn btn-default" 
        title="Tooltip on bottom" data-toggle="tooltip" >
  Tooltip on Bottom
</button>

<!-- end snippet -->

What specifically are you trying to do where the default placement options and CSS don't apply?

Handling on Show

You can't access the tooltip during the show event... however... you can dynamically change the template option so the resulting tooltip will have custom styles.

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(function () {

  $('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    placement: 'bottom'
  }).on("show.bs.tooltip", function (e) {
     var $tooltip = $(this).data('bs.tooltip')
     var $template = $($tooltip.options.template)

     // whatever modifications you'd like to do here while invisible
     $template.find('.tooltip-inner')
                    .css("background", "yellow")
                    .css("color", "black")
     
     // reapply template
     $tooltip.options.template = $template[0].outerHTML;
  });

});

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<button type="button" class="btn btn-default" 
        title="Tooltip on bottom" data-toggle="tooltip" >
  Tooltip on Bottom
</button>

<!-- end snippet -->

Handling On Shown

You could modify the tooltip template to include a hidden class, and style that with visibility: hidden;. Then, once the tooltip has appeared in the shown event, modify it however you want and finish by removing the class.

Note: do not try to use the class name hidden or hide as these are taken by bootstrap and set display:none. If the tooltip display is set to none, then the element will be incorrectly positioned. So we have to let it occupy space, but just stay invisible until we're ready to render.

<!-- begin snippet: js hide: false --> <!-- language: lang-js -->

$(function () {

  $('[data-toggle="tooltip"]').tooltip({
    container: 'body',
    placement: 'bottom',
    template: '<div class="tooltip init" role="tooltip"><div class="tooltip-arrow"></div><div class="tooltip-inner"></div></div>'

  }).on("shown.bs.tooltip", function (e) {
     var $tooltip = $(this).data('bs.tooltip')
     
     // whatever modifications you'd like to do here while invisible
     $tooltip.$tip.find('.tooltip-inner')
                    .css("background", "yellow")
                    .css("color", "black")
     
     // remove invisibility cloak
     $tooltip.$tip.removeClass('init');
  });

});

<!-- language: lang-css -->

.tooltip.init { 
  visibility: hidden;
}

<!-- language: lang-html -->

<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css" rel="stylesheet"/>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>

<button type="button" class="btn btn-default" 
        title="Tooltip on bottom" data-toggle="tooltip" >
  Tooltip on bottom
</button>

<!-- end snippet -->