Search code examples
javascriptjqueryhtmlqtip

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:

  • Up: anchor, which should move the OuterDiv up (probably something like this: move up/down in jquery)
  • Down: anchor, which should move the OuterDiv down
  • Delete: anchor, which should remove the calling OuterDiv

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?


Solution

  • 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();
                    })
                }
            }
        })
    });