title: Bootstrap 4.5.3 Tooltip placement "auto left" not working
body: <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;a href=&quot;#&quot; data-toggle=&quot;tooltip&quot; title=&quot;Hooray!&quot;&gt;Hover over me&lt;/a&gt;
    &lt;input type=&quot;email&quot; class=&quot;form-control&quot; placeholder=&quot;Enter email&quot; id=&quot;email&quot; data-toggle=&quot;tooltip&quot; title=&quot;Hooray!&lt;br&gt;a&quot; data-trigger=&quot;focus&quot; data-html=&quot;true&quot; data-placement=&quot;auto left&quot;&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function(){
    $('[data-toggle=&quot;tooltip&quot;]').tooltip();   
  });
  &lt;/script&gt;
  </code></pre>
  <p>Tooltip in &quot;<strong>a</strong>&quot; tag is working fine.</p>
  <p>But in textboxt combination of &quot;data-placement&quot; not working
  I got &quot;Cannot read property 'indexOf' of undefined&quot; while using tooltip with the combination of &quot;<em><strong>auto left</strong></em>&quot; in &quot;<strong>input</strong>&quot;</p>
  <p><a href="https://i.stack.imgur.com/DP30J.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DP30J.jpg" alt="enter image description here" /></a></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;title&gt;Bootstrap Example&lt;/title&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous"&gt;
    &lt;script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  
    &lt;div class="container mt-3"&gt;
      &lt;h3&gt;Tooltip Example&lt;/h3&gt;
      &lt;p&gt;Tooltips must be initialized with jQuery: select the specified element and call the tooltip() method.&lt;/p&gt;
      &lt;a href="#" data-toggle="tooltip" title="Hooray!"&gt;Hover over me&lt;/a&gt;
      &lt;input type="email" class="form-control" placeholder="Enter email" id="email" data-toggle="tooltip" title="Hooray!&lt;br&gt;a" data-trigger="focus" data-html="true" data-placement="auto left"&gt;
    &lt;/div&gt;
  
    &lt;script&gt;
      $(document).ready(function() {
        $('[data-toggle="tooltip"]').tooltip();
      });
    &lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>