title: Facebook like Notification Icon for Ext3 Button
body: <p>I am using an Ext toolbar which has one button called "NotificationButton" on which I plan to display numbers just like in the facebook notification. I can successfully change the html of the button. The only thing I am stuck is on the css part.</p>
  
  <p>Can anyone point me to the right direction? Thanks in advance.</p>
  
  <p><strong>Edited!</strong></p>
  
  <p>As suggested by Daulet, at this point, I have:</p>
  
  <p><strong>Stylesheet</strong></p>
  
  <pre><code>&lt;style type="text/css"&gt;
      .fbNotification
      {
          background: none repeat scroll 0 0 orange!important;
          border: 1px solid orange !important;
          border-radius: 10px !important;
          width: 18px !important;
      }
  
      .fbNotification .x-tip-body
      {
          font-size: 10px !important;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>&lt;ext:Panel ID="Panel1" runat="server" Title="Panel with toolbars" Width="600" Height="300"&gt;
      &lt;TopBar&gt;
          &lt;ext:Toolbar runat="server"&gt;
              &lt;Items&gt;
                  &lt;ext:Button ID="b1" runat="server" Icon="Add" StandOut="true" Text="Notifications"&gt;
                      &lt;Listeners&gt;
                          &lt;Render Fn="createTooltp"&gt;&lt;/Render&gt;
                      &lt;/Listeners&gt;
                  &lt;/ext:Button&gt;
                  &lt;ext:ToolbarFill /&gt;
                  &lt;ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupAdd" Pressed="true" /&gt;
                  &lt;ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupDelete" /&gt;
                  &lt;ext:Button runat="server" EnableToggle="true" ToggleGroup="G1" Icon="GroupEdit" /&gt;
              &lt;/Items&gt;
          &lt;/ext:Toolbar&gt;
      &lt;/TopBar&gt;
  &lt;/ext:Panel&gt;
  </code></pre>
  
  <p><strong>Script:</strong></p>
  
  <pre><code>&lt;script type="text/javascript" language="javascript"&gt;
      function createTooltp(cmp) {
          tooTip = new Ext.ToolTip({
              anchor: 'left',
              target: cmp,
              html: '10',
              cls: 'fbNotification',
              autoRender: true,
              renderTo: Ext.getBody(),
              autoHide: false,
              shadow: false,
              padding: 0,
              width: 16,
              shrinkWrap: 0,
              anchorToTarget: true,
              mouseOffset: [-4, -8]
          });
  
          tooTip.show();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/ScfIE.jpg" alt="enter image description here">
  The problem now is that the css is not applied properly. Please help!</p>