title: Bootstrap - Tooltip is not working (using bootswatch)
body: <p>does anyone have an idea why my tooltip is not working?</p>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div class="form-check"&gt;
            &lt;label class="form-check-label" &gt;
              &lt;input type="radio" class="form-check-input" name="optionsRadios" 
              id="has-been" value="has-been" (click)='onRadioClick(2)'&gt; Has-Been
              &lt;i class="fa fa-question-circle" aria-hidden="true" 
              data-toggle="tooltip" data-placement="right" title=""&gt;&lt;/i&gt;
            &lt;/label&gt;
  
          &lt;/div&gt;
  </code></pre>
  
  <p>My Imported bootstrap files from index.html</p>
  
  <pre><code>&lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
      crossorigin="anonymous"&gt;
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
    &lt;link rel="stylesheet" href="https://bootswatch.com/_vendor/popper.js/dist/umd/popper.min.js"&gt;
    &lt;link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
      crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;!-- Latest compiled and minified JavaScript --&gt;
    &lt;script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
      crossorigin="anonymous"&gt;
      &lt;/script&gt;
  </code></pre>
  
  <p>Is it a problem that I am using a bootswatch theme?</p>
  
  <p><strong>EDIT:</strong>
  Tooltips from <a href="https://bootswatch.com/flatly/" rel="nofollow noreferrer">here</a></p>
  
  <p><a href="https://i.stack.imgur.com/lhzDb.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lhzDb.jpg" alt="enter image description here"></a></p>
  
  <p><strong>EDIT 2:</strong> 
  I added the complete <code>index.html</code>. I am trying to change the look of my tooltips according to the picture above. At the moment I only have the default text-look.</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;UniApp&lt;/title&gt;
    &lt;base href="/"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
  
    &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" integrity="sha384-Zug+QiDoJOrZ5t4lssLdxGhVrurbmBWopoEl+M6BdEfwnCJZtKxi1KgxUyJq13dy"
      crossorigin="anonymous"&gt;
    &lt;link rel="stylesheet" href="//bootswatch.com/4/flatly/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;app-root&gt;&lt;/app-root&gt;
  
    &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
  
    &lt;script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js" integrity="sha384-a5N7Y/aK3qNeh15eJKGWxsqtnX/wWdSZSKp+81YjTmS15nvnvxKHuzaWwXHDli+4"
      crossorigin="anonymous"&gt;&lt;/script&gt;
  
    &lt;script&gt;
      $(document).ready(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });
    &lt;/script&gt;
  &lt;!-- 
    &lt;script&gt;
      $(function () {
        $('[data-toggle="tooltip"]').tooltip();
      });  
    &lt;/script&gt; --&gt;
  
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>