### 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](http://en.wikipedia.org/wiki/Flash_of_unstyled_content) problem.






    $(function () {

      $('[data-toggle="tooltip"]').tooltip({
        container: 'body',
        placement: 'bottom'
      });
      
    });



    .tooltip .tooltip-inner {
      background-color: yellow;
      color: black;
    }



    <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>



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.





    $(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;
      });

    });



    <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>





### 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.





    $(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');
      });

    });



    .tooltip.init { 
      visibility: hidden;
    }



    <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>

I've been trying to manipulate the bootstrap tooltip's positioning without success.

**Attempt #1**:



    stuff.tooltip({
        container: 'body',
		placement: function(tip, el) {
			// played with tip, but it still add style: top, left at the end...
		}
	});

**Attempt #2**:



    stuff.tooltip({
        container: 'body',
		placement: 'top'
	}).on("show.bs.tooltip", function() {
		// don't have access of the tip here
	});

**Attempt #3**:


	
    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?