Bootstrap tooltip does not allow table rows to be clicked

Question

On my page, I have clickable table rows that open a specific link. This functionality has worked just as planned, that is, until I tried converting the traditional tooltips into Bootstrap ones. Now, I can't seem to get the clickable functionality back (even though the tooltips work normally).

HTML:

<tr class="activity" data-href="./activity/13" data-container="body" data-toggle="tooltip" data-placement="auto left" title="Click on a row to view the activity">
    <td style="vertical-align:middle;text-align:center"><b>1</b></td>
    <td>
        Attended seminar!<br /><div style="text-align:right"><i class="fa fa-lock fa-fw" style="color:rgb(217,83,79)" data-container="body" data-toggle="tooltip" data-placement="auto bottom" title="Locked for editing"></i></div>
    </td>
    <td style="vertical-align:middle;color:rgb(217,83,79);font-weight:bold;text-align:right">1</td>
</tr>

JavaScript:

<script type="text/javascript">
    $(document).ready(function($) {
        $(".activity").click(function() {
            window.document.location = $(this).data("href");
        });
    });
    $("[data-toggle=tooltip]").tooltip();
</script>

Answer 1

Solved, for whatever reason I needed to remove the $(document).ready() part of the JavaScript code:

<script type="text/javascript">
    $(".activity").click(function() {
        window.document.location = $(this).data("href");
    });
    $("[data-toggle=tooltip]").tooltip();
</script>

More details as to why this solved the issue would be appreciated!