Manipulating original elements with qTip

Posted by pjotr on Stack Overflow See other posts from Stack Overflow or by pjotr
Published on 2011-11-21T19:26:47Z Indexed on 2012/06/07 22:40 UTC
Read the original article Hit count: 172

Filed under:
|
|
|

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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery