{{#if this.isVisible}}
    {{!-- tether the throbber --}}
    <LiquidTether
        @class="throbber-container"
        @target={{this.target}}
        @attachment="middle center"
        @targetAttachment={{this.throbberAttachment}}
        @targetOffset={{this.throbberOffset}}
    >
        <a class="throbber-trigger" href="#" {{action "open"}} id={{this._throbberElementId}}>
            <span class="throbber"></span>
        </a>
    </LiquidTether>

    {{#if this.isOpen}}
        {{!-- wormhole the background click overlay --}}
        <LiquidWormhole @class="tour-container">
            <div class="tour-background" {{action "close" on="click"}}></div>
        </LiquidWormhole>

        {{!-- tether the popover --}}
        <LiquidTether
            @class="tour"
            @target={{this._throbberElementSelector}}
            @attachment={{this._popoverAttachment}}
            @targetAttachment={{this._popoverTargetAttachment}}
            @offset={{this._popoverOffset}}
        >
            <div class="popover-item popover-triangle-{{this.popoverTriangleClass}}">
                <h3 class="popover-title">{{this._throbber.title}}</h3>
                <div class="popover-body">
                    {{{this._throbber.message}}}
                </div>
                <footer class="popover-foot">
                    <a class="tour-optout" href="#" {{action 'optOut'}}>{{{t "Not your first time? <em>Skip these tips</em>"}}}</a>
                    <a class="tour-dismiss gh-btn gh-btn-black" href="#" {{action 'markAsViewed'}}><span>{{t "Ok, got it"}}</span></a>
                </footer>
            </div>
        </LiquidTether>
    {{/if}}
{{/if}}