CODEWITHSUNDEEP
javascriptjqueryhtmlqtip
sventevit
sventevit

Reputation: 4816

Manipulating original elements with qTip

I have a bunch of divs on my page and each of them has only the class attribute. In the divs there are some spans, which are set up to display a tooltip with the help of qTip.

The tooltip should contain three items:

My code so far:

<body>
    <div class="OuterDiv">
        <div class="InnerDiv">
            <span class="Position">Position 1</span>
        </div>
    </div>
    <div class="OuterDiv">
        <div class="InnerDiv">
            <span class="Position">Position 2</span>
        </div>
    </div>
</body>

And scripts:

$(document).ready(function () {
            var qTipContent = '<a href="javascript:void(0)" onclick="">&uarr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">&darr;</a>&nbsp;&nbsp;&nbsp;';
            qTipContent = qTipContent + '<a href="javascript:void(0)" onclick="">X</a>';
            $('.Position').each(function () {
                $(this).qtip({
                    content: qTipContent,
                    hide: {
                        fixed: true
                    }
                })
            });
        });

How should the onclick function in the qTip content look like?

Upvotes: 1

Views: 200

Answers (1)

Mothy
Mothy

Reputation: 66

My solution can be found at this jsFiddle - Besides cleaning up the qTipContent (was just really messy), the only real notable addition was adding ids to the anchors, and using the qTip api to add bindings to the click event for each anchor as the qTip window is added.

$('.Position').each(function(idx, elem) {
    $(this).qtip({
        content: qTipContent,
        show: {
            when: {
                event: 'click'
            }
        },
        hide: {
            fixed: true,
            when: {
                event: "unfocus"
            }
        },

        api: {
            onRender: function() {
                var $qtip = $(this.elements.content);
                var odiv = $(elem).closest(".OuterDiv");

                $("#up_arrow", $qtip).click(function() {
                    odiv.insertBefore(odiv.prev());
                })

                $("#down_arrow", $qtip).click(function() {
                    odiv.insertAfter(odiv.next());
                })

                $("#delete", $qtip).click(function() {
                    odiv.remove();
                })
            }
        }
    })
});

Upvotes: 1

Related Questions