Mootools FloatingTips and array

Question

I am trying to use Mootools Floating Tips with an array for ID's link and ID's content to display.

Demo is here and I am trying to use it for several tips with ID0 ID1 ID2 as in this example .

The idea is to create a for loop:

var x = 0;

    for (x=0; x++) {

    var divIDs = "#advanced" + x + "a'";
    var content = "$('htmlcontent" + x + "')"

    new FloatingTips(divIDs, {

    content: function() { return content; },

    html: true,    
    });

}

Any help would be appreciated!

Greg

score 0 · Answer 1 · answered Nov 20 '12 at 10:10

Do you need to use an array of IDs? I'd suggest it may be better to set a class on all of your tip containers and the content elements, and this should mean you need to only create a single instance of FloatingTips(). For example:

<div class="tipContainer">
    <p>A second tip</p>
    <p><a href="#">Let me see!</a></p>

    <div class="tipContent" style="display: none;">
        <p>Here is another tip.</p>
    </div>    
</div>

<div class="tipContainer">
    <p>A second tip</p>
    <p><a href="#">Let me see!</a></p>

    <div class="tipContent" style="display: none;">
        <p>Here is another tip.</p>
    </div>    
</div>

The updated call to FloatingTips would contain updated references to the tipContainer and tipContent classes as set in the HTML. The function to pull the content has been changed slightly so that it looks for content within the element with a class of 'tipContent'.

new FloatingTips('.tipContainer', {

    // Content can be a string (an attribute name) or a function.
    // If it's a function, it can returns string or HTML elements.
    content: function(tipContainer) { 
        return $(tipContainer).getElement('.tipContent'); 
    },

    html: true,        // I want that content is interpreted as HTML
    center: false,     // I do not want to center the tooltip
    arrowOffset: 16,   // Arrow is a little more the the right
    offset: { x: 10 }, // Position offset {x, y}
    position: 'bottom',    
});

Here's an example of this in action - http://jsfiddle.net/pH3BB/1/

Hope this helps!

Craig

Mootools FloatingTips and array

1 Answers1