[SalesForce] Implementing tooltip in a lightning component

I would follow the below in sequential order to find a solution to the problem.

1.Lightning components works on the concept that you manipulate data and UI gets manipulated automatically. I would see if i can manipulate the data to get UI work the way i want. I would use the components init event for building the hierarchical UI

2.I would really check if i need jquery for this. Jquery would manipulate a dom element, i would check if i can manipulate that using vanilla js.

Below information is what might help you solve this problem:

3.If you would still want to use jquery for manipulation then try Using the aura:valueRender event(summer 2017) to manipulate UI after dom is constructed.

4. Be little cognizant of the race condition you would run into. sometimes your jquery resource might load after the rendering cycle is complete so use a boolean in your after scripts loaded to ensure your scripts are loaded and then modify the UI in your post rendering cycle.

If you need specific help then post your code to see where the issue is

Is it possible to achieve this without using JQuery?

Yes. If you can do something with JQuery, you can do it without JQuery. It's all JavaScript. As an addendum, anything you can do in JQuery you can do without JQuery and get better performance.

In the interest of keeping things brief, I'm not going to write out a full copy of your code with modifications, but a smaller, more generalized example that demonstrates how to do what you're trying to do.

<aura:application >
    <aura:attribute name="rows" type="Object[]" />
    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <table>
        <tbody>
            <aura:iteration items="{!v.rows}" var="row" indexVar="rowIndex">
                <tr>
                    <td data-index="{!rowIndex}" onclick="{!c.toggle}">
                        {!row.Name}
                    </td>
                </tr>
                <aura:if isTrue="{!row.expanded}">
                    <aura:iteration items="{!row.children}" var="child">
                        <tr>
                            {!child.Name}
                        </tr>
                    </aura:iteration>
                </aura:if>
            </aura:iteration>
        </tbody>
    </table>
</aura:application>

({
    init: function(cmp, evt) {
        cmp.set("v.rows", [
            {Name: "A",
            expanded: false,
            children: [
            { Name: "A1" },
            { Name: "A2" }
            ]},
            {Name: "B",
            expanded: false,
            children: [
            { Name: "B1" },
            { Name: "B2" }
            ]},
            {Name: "C",
            expanded: false,
            children: [
            { Name: "C1" },
            { Name: "C2" }
            ]}
                ]);
    },
    toggle: function(cmp, evt) {
        var rows = cmp.get("v.rows");
        rows[evt.target.dataset.index].expanded = !rows[evt.target.dataset.index].expanded;
        cmp.set("v.rows", rows);
    }
})

As you can see from this code, it's a trivial matter to simply render the extra rows when the "expanded" attribute has been toggled. You should be able to modify this example to suit your needs.

I've purposefully left out all styling and fluff to get to the heart of the matter, which I think this app demonstrates easily. Most likely, you'll just need to add an "expanded" attribute to your data's information, and then toggle it as appropriate.

There's lots of other things you could do with this as well, such as querying the database, making a callout, or whatever else it is you want/need to do to get the data.