Show tooltip only on directly selected child element.

[Rokko11]

Hi! Given, I have following html with JavaScript for tooltipsting and unimportant css. (Or just use my jsfiddle-link

<div id="outer" data-tooltip="outer text" class="dotooltip">
    <div id="inner" data-tooltip="inner text" class="dotooltip">text</div>
</div>

<script type="text/javascript">
    $(document).ready(function(){
        $('.dotooltip').each(function () {
            $(this).tooltipster({
                interactive: true,
                content: $(this).attr("data-tooltip")
            });
        });
    });
</script>

<style>
    #outer {
        border: red 1px solid;
        padding-left: 10%;
        padding-top: 10%;
        width: 300px;
        height: 100px
    }
    #inner {
        width: 100px;
        border: red 1px solid
    }
</style>

Is there any possibility to disable the outer tooltip when triggering the inner tooltip? At the moment both tooltips are getting displayed.

Kind Regards,
Rokko

[louisameline]

Hi, yes you can. I suggest you use the experimental Tooltipster v4 to accomplish that.
In the functionBefore callback, you'll have to get all the parents of the inner field, provide them to the instances static method to get the instances of all tooltips on parents, and call the close method on these instances.

[louisameline]

Or if you want a less generic solution, v3 is just as good, do something like this in the inner tooltip functionBefore callback:

functionBefore: function(){
    $('#outer').tooltipster('hide');
}

[e-motiv]

For those people arriving here, llike me, to find the complete code solution -> #828