Tooltips on top right buttons don't align well

I don't think the ombi and plex buttons in the top right corner are self-explanatory enough at first sight so I wanted to add bootstrap tooltips, but due to padding/margin (I think) they don't align well. The code looks like this:

<div class="row-bblur">
<!-- <<User Edit>> Replace ombi with the LOWERCASE name of this buttons destination tab -->
	<div tab="ombi" class="hp-link col-sm-3 col-lg-3">
		<div class="content-box orange-bg ombi" style="cursor: pointer;" data-toggle="tooltip" data-placement="bottom" title="Add request">
			<h1 style="margin: 10px" class="text-uppercase text-center">Ombi</h1>
			<div class="clearfix"></div>
		</div>
	</div>
<!-- <<User Edit>> Replace plex with the LOWERCASE name of this buttons destination tab -->
	<div tab="plex" class="hp-link col-sm-3 col-lg-3">
		<div class="content-box orange-bg plex" style="cursor: pointer;" data-toggle="tooltip" data-placement="bottom" title="View media library">
			<h1 style="margin: 10px" class="text-uppercase text-center">Plex</h1>
			<div class="clearfix"></div>
		</div>
	</div>
</div>

The result looks like this:

Is there a way to fix this?

Start with the supplied top-right button markup and compare its padding and margins with Bootstrap 3.3 tooltip behavior. Check the tooltip positioning around the Ombi and Plex buttons; the work is done when both tooltips align correctly without disrupting the buttons.