masonry-brick media-item blocks tooltips

The following is in a Rails 3 application:

<i class="fa fa-hourglass-half has-tooltip info-icon-small" aria-hidden="true" data-toggle="tooltip" data-placement="auto" data-original-title="This tooltip shows up as expected."></i>
<ul class="masonry media-grid" style="margin-top: 15px;">
    <li class="masonry-brick media-item">
        <h3>This text shows up</h3>
        <i class="fa fa-hourglass-half has-tooltip info-icon-small" aria-hidden="true" data-toggle="tooltip" data-placement="auto" data-original-title="No sign of this tooltip."></i>
    </li>
</ul>

When the page is viewed the first icon shows up with a working tooltip but the second icon's tooltip is never visible. Removing class="masonry-bick media-item" from each <li> element causes the tooltips to show up whilst, of course, making a mess of the layout.

Does anyone know why this happens, or any means of allowing the tooltips to display within the <li class="masonry-brick media-item"> elements?