Hi Daniel,
is it possible do multiple instance? here an example:

$(".lb1").pictip({ //lb1 corrisponde all'elemento li che contiene l'immagine lookbook dove inserire gli spot
eventType: pictipEvent,
spots: [
{ //primo spot
top: '40%', left: '40%', //coordinate del primo spot (pallino)
content: 'acquistaMaglia 500,00 € alessandrogaeta',
tooltipPosPercentage: ['48%', '48%'] //coordinate del primo tooltip legato al relativo spot
},
{ //secondo spot
top: '20%', left: '40%', //coordinate del secondo spot (pallino)
content: 'acquistaMaglia 500,00 € alessandrogaeta',
tooltipPosPercentage: ['30%', '30%'] //coordinate del secondo tooltip legato al relativo spot
}
]
});
$(".lb2").pictip({ //lb2 corrisponde all'elemento li che contiene l'immagine lookbook dove inserire gli spot
eventType: pictipEvent,
spots: [
{ //primo spot
top: '30%', left: '30%', //coordinate del primo spot (pallino)
content: 'acquistaMaglia 500,00 € alessandrogaeta',
tooltipPosPercentage: ['38%', '38%'] //coordinate del primo tooltip legato al relativo spot
},
{ //secondo spot
top: '10%', left: '50%', //coordinate del secondo spot (pallino)
content: 'acquistaMaglia 500,00 € alessandrogaeta',
tooltipPosPercentage: ['15%', '45%'] //coordinate del secondo tooltip legato al relativo spot
}
]
});

First off, this is a fantastic plugin! I would like to use it though for custom html elements in .Net if possible

Here's my question: Currently I am using the content property of pictip to load the html markup. Is it possible instead to pull all nested DOM elements by specifying the tooltipid without having to enter anything into the 'content' portion?

So essentially instead of passing the html markup through the content section, just passing the div or another compatible DOM element and having it load in all of the associated child DOM objects?

When using the 'content' property as shown below it works just fine but if i leave it out or set it to an empty string, I get back nothing as shown in the image example below

EXAMPLE

I have some basic html markup using your script plugin:

<%-- image with spot positioned correctly on it --%>
<div id="map1">
    <div><img src="images/maps/map1.png" /></div>
</div>

<%-- tooltip container--%>
<div id="test">
    <h2>Map 1</h2>
    <p>Pulled from the actual div itself</p>
</div>

Here's the actual script:

var contents = {
    map1: [
                '<h2>Map 1</h2>',
                '<p>pulled from the contents object</p>
    ].join('')
};

$('#map1').pictip({
    spots: [
        { top: '180px', left: '370px', content: '', tooltipId: 'test', tooltipPosition: 'bl' }
    ],
    show: function (tooltip) {
        tooltip.addClass('is-open');
    },
    close: function (tooltip) {
        tooltip.removeClass('is-open');
    }
});

Example image showing the missing content:

What I want to do is to have it display the stuff inside of

Because from what I've read in the source code, it seems that this not the case so far.

// TODO: refactor to support different types of animations

Thanks!

I just tried the eventType: 'hover', it doesn't seem to work on 0.24.

Tried on my own page and also on the demo page. Reproduced with Safari (latest), Chrome (latest) and Firefox (latest as well).

Any thing I would missing?

What I did in the demo provided with the sources:

$('#pictip-demo').pictip({
    eventType: 'hover', // is it like this?
    spots: [
        {top: '75px', left: '25px', content: '<p>Nice Mountain!</p>', tooltipPosition:'br'/*, tooltipClose: true*/},
        {top: '175px', left: '125px', content: '<p>Get into the water!</p>', tooltipPosition:'tr'},
        {top: '65px', left: '165px', content: '<p>Perfect sunset!</p>', tooltipPosition:'bl'}
    ],
    //tooltip: false,
    onShowToolTip: function(spot, tooltip){
        console.log('Opening...', spot, tooltip);
    },
    onCloseToolTip: function(spot, tooltip){
        console.log('Closing...', spot, tooltip);
    }
});

Cheers!