title: How to style ng-bootstrap components in Angular 2
body: <p>I'm trying to apply styles to the ngbTooltip component in my Angular 2 app. I apply the directive as:</p>
  
  <pre><code>&lt;div [ngbTooltip]="tooltipText"&gt;
      Element text
  &lt;/div&gt;
  </code></pre>
  
  <p>But since Angular 2 applies style scoping, I can't directly style the <code>.tooltip</code> class in my component's template.</p>
  
  <p>How can I give the tooltips <em>for this specific component</em> a custom styling?</p>
  
  <p>EDIT:</p>
  
  <p>I have a scss stylesheet that's attached to my component. My styles (simplified) are:</p>
  
  <pre><code>.license-circle {
      width: 10px;
      ... other styles
  }
  
  /deep/ .tooltip {
      &amp;.in {
          opacity: 1;
      }
  }
  </code></pre>
  
  <p>But then my rendered styles look like:</p>
  
  <pre><code>&lt;style&gt;
  .license-circle[_ngcontent-uvi-11] {
    width: 10px; }
  
  .tooltip.in {
    opacity: 1; }
  &lt;/style&gt;
  </code></pre>
  
  <p>Which makes me believe the tooltip styles are being un-encapsulated (instead of just <em>piercing</em> this component's children.</p>
  
  <p>Note: I tried <code>:host &gt;&gt;&gt; .tooltip</code> and it didn't work, so I ended up using <code>/deep/</code>.</p>
  
  <p>Thanks!</p>