Bootstrap Tooltip within Popover

btwp.html

<div class="container">
  <button id="popover1" type="button" class="" data-placement="bottom">on click</button>

  <!-- Popover content 1-->
  <div id="popoverContent1" style="display: none">
    <form>
      <div class="form-group has-error">
        <label for="exampleInputEmail1">Email address</label>
        <input type="email" class="form-control" placeholder="Email">
      </div>
      <button type="submit" class="btn btn-default">Submit</button>
    </form>
  </div>
</div>

<div id="messageTooltip1" style="display:none;">Вы не ввели email</div>

btwp.js

//function tooltip 
var myTooltip = function() {
    $('.has-error input').tooltip({
      placement: 'left',
      title: function() {
        return $('#messageTooltip1').text();
      }
    }).tooltip('show'); //Display the tooltip element
};


jQuery(document).ready(function(){
    // popover 
    $("#popover1").popover({
        html : true,
        trigger : 'click',
        content: function(){
          return $('#popoverContent1').html();
        }
    });
    
    // show tooltip
    $('#popover1').on('shown.bs.popover', function () {
      myTooltip();
    });
    
    // remove class ".tooltip"
    $('#popover1').on('hide.bs.popover', function () {
      $('.tooltip').remove();
    });
});

Example - https://jsfiddle.net/martdn/pw47xybg