title: remove transparency from bootstrap tooltip
body: <p>The standard .tooltip from twitter bootstrap has a transparency that I would like to remove. </p>
  
  <p>This my HTML: </p>
  
  <pre><code>&lt;a href="#" class="btn
  btn-info" 
  style="margin:10px;" 
  data-toggle="tooltip" 
  data-placement="bottom" 
  data-html="true"
  title="MERKNAD 1 Denne klassifiseringen er i henhold til NS-EN 13501-2. &lt;br /&gt;&lt;br /&gt; MERKNAD 2 Valgene 11-16 gjelder bærende konstruksjoner, valgene 21-24 gjelder kun integritet, valgene 31-37 gjelder både integritet og isolasjon, valgene 41-46 gjelder bærende skiller konstruksjoner med isolasjonskrav, og valgene 51-54 gjelder seksjoneringsvegger og dekker."&gt;Hover&lt;/a&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>.tooltip &gt; .tooltip-inner {
      border: 1px solid;
      padding: 10px;
      max-width: 450px;
      color: black;
      text-align: left;
      background-color: white;
      background: white;
      opacity: 1.0;
      filter: alpha(opacity=100);
  }
  .tooltip &gt; .tooltip-arrow {
      border-bottom-color: black;
  }
  </code></pre>
  
  <p>Also I made a JSFiddle to illustrate, here: 
  <a href="https://jsfiddle.net/fiddlejan/xpwhknja/" rel="noreferrer">https://jsfiddle.net/fiddlejan/xpwhknja/</a></p>
  
  <p>If you hover over the button you can see how the transparent tooltip text is also showing the text underneath. </p>
  
  <p>I tried: </p>
  
  <pre><code>opacity: 1.0;
  filter: alpha(opacity=100);
  </code></pre>
  
  <p>But it does't seem to work... </p>