How to make bootstrap 3 tooltip work with parent div with overflow:hidden?

You can use container attribute so tooltip itself will be placed in parent container or event body element and it won't break even with overflow hidden because it will be positioned absolutely.

$('a[data-toggle="tooltip"]').tooltip({
   animated : 'fade',
   placement : 'bottom',
   container: 'body'
});

You can also simply add data-container="body" to the tooltipped element. E.g. <button type="submit" title="Add Record to Book Bag" data-toggle="tooltip" data-container="body" aria-role="button"> ... </button>