title: Cannot set width of bootstrap popover in angular project
body: <p>There are couple of stackoverflow questions about this subject but none of them worked for me. Maybe this is related somehow with angular4.</p>
  
  <p>Basically I'm just trying to set width of the popover control.</p>
  
  <p>This is the screenshot to understand the issue better.</p>
  
  <p><a href="https://i.stack.imgur.com/6kYWZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6kYWZ.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;a id="searchPopup" data-html="true" data-placement="auto left" data-container="body" data-toggle="popover"&gt;
    &lt;span mdTooltip="Search another website worth" class="glyphicon glyphicon-search"&gt;
    &lt;/span&gt;
  &lt;/a&gt;
  
  &lt;div id="popover-content" class="hide" style="width: 800px; max-width: 100%;"&gt;
    test test test test test test test test test test test test test
    &lt;table style="width:1000px;border:1px;"&gt;
      &lt;tr&gt;
        &lt;td&gt;
          test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 test2 
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;
  &lt;/div&gt;
  
    ngOnInit() {
  
      $('[data-toggle=popover]').popover({
        container: 'body',
        html: true,
        content: function () {
          return $('#popover-content').html();
        }
      });
  
    }
  
  .popover {
          max-width: 100% !important;
      }
  
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.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;
  </code></pre>