title: Custom tooltip in AngularJS
body: <p>i have made tooltip in AngularJS using this code. I want to change the background of my tooltip. I don't want black background of my tooltip content. Also i want to change the shape of tooltip. How to do this? i tried some css codes but its not giving desird result.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = angular.module('plunker', ['ui.bootstrap']);
  
  app.controller('MainCtrl', function($scope) {
    
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.round-button {
      display:block;
      width:50px;
      height:50px;
      line-height:50px;
      border: 2px solid #f5f5f5;
      border-radius: 50%;
      color:#f5f5f5;
      text-align:center;
      text-decoration:none;
      background: #ff9900;
      box-shadow: 0 0 3px gray;
      font-size:20px;
      font-weight:bold;
  }
  .round-button:hover {
      background: #cccc00
  ;
  }
  
  .zoomInInfinite {
   animation: zoomInInfinitef 1s;
   -webkit-animation: zoomInInfinitef 1s infinite;
   -moz-animation: zoomInInfinitef 1s infinite;
  }
  @keyframes zoomInInfinitef {
   from {
   opacity: 0;
   transform: scale3d(.3, .3, .3);
  }
   50% {
   opacity: 1;
  }
  }
  @-webkit-keyframes zoomInInfinitef {
   from {
   opacity: 0;
   -moz-transform: scale3d(.3, .3, .3);
   -webkit-transform: scale3d(.3, .3, .3);
  }
   50% {
   opacity: 1;
  }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
     &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;AngularJS Plunker&lt;/title&gt;
  
      &lt;!-- Styles --&gt;
      &lt;link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"&gt;
      
      &lt;!-- Scripts --&gt;
      &lt;script src="https://code.angularjs.org/1.2.20/angular.js"&gt;&lt;/script&gt;
      &lt;!-- &lt;script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"&gt;&lt;/script&gt;--&gt;
  &lt;script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"&gt;&lt;/script&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
      
    &lt;/head&gt;
  
    &lt;body ng-controller="MainCtrl"&gt;
      &lt;div class="container text-center"&gt;
        &lt;button type="button" class="round-button zoomInInfinite" 
            data-toggle="tooltip" 
            tooltip="this is my tooltip"
            tooltip-placement="right" &gt;
           
        &lt;/button&gt;
            
      &lt;/div&gt;
  
      
    &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>