No, it is not possible to use the tooltip in a pure declarative sense.  From the [Docs][tooltip]: 

>**Opt-in functionality:**  
>For performance reasons, the Tooltip and Popover data-apis are opt-in, meaning you must initialize them yourself.

So you must call `.tooltip()` manually in JavaScript like this:



    $("[data-toggle=tooltip]").tooltip();

Or use whatever selector you want.  

[Working Demo in jsFiddle][fiddle]
====

Which should look like this:

![screenshot][screenshot]

[tooltip]: http://getbootstrap.com/javascript/#tooltips
[fiddle]: http://jsfiddle.net/KyleMit/Q8TZv/
[screenshot]: http://i.imgur.com/eyeEhk0.png

I am trying to use the Bootstrap [tooltip][tooltip] in an app of mine. Currently, I have the following:



    <button type="button" class="btn btn-default" 
            data-toggle="tooltip" data-placement="left"
            title="Tooltip on left">
                Tooltip on left
    </button>

Unfortunately, my tooltip is not showing. I'm trying to figure out what I'm doing wrong. I know that it can be created via JavaScript. However, I'm trying to define my tooltip declaratively. I've confirmed that the Tooltip.js file is being included. However, I can't figure out what I'm doing wrong. 

Is it possible to use a tooltip in a pure declarative sense? If so, can someone show me how via a JSFiddle or Bootply sample? I'm really banging my head on this one.

[tooltip]: http://getbootstrap.com/javascript/#tooltips

Bootstrap Tooltip Not Showing Up

### 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?