Javascript Tool-tip in design

Squiz Matrix Support
1

I am trying to implement some tool-tips on my Matrix design, before i start trouble-shooting too deep, is it possible to put javascript in the designs itself or does this not work?


As soon as i tried to code it into matrix i got lots of php errors mainly to do with the tool-tip images



the error is like this:


[quote]PHP Notice

File:  [SYSTEM_ROOT]/data/private/assets/design_customisation/605/design_file.php  Line:  92

Message:  Undefined index: tooltip_logos[/quote]



My tool-tip code is the folowing


[quote]<script src="mysource_files/dw_event.js" type="text/javascript"></script>

<script src="mysource_files/dw_viewport.js" type="text/javascript"></script>

<script src="mysource_files/dw_tooltip.js" type="text/javascript"></script>

<script type="text/javascript">



function doTooltip(e, ar) {

    if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;

    var cntnt = wrapTipContent(ar);

    var tip = document.getElementById( Tooltip.tipID );

    Tooltip.show(e, cntnt);

}



function hideTip() {

    if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;

    Tooltip.hide();

}



function wrapTipContent(ar) {

    var cntnt = "";

    if ( ar[0] ) cntnt += '<div class="img"><img src="' + ar[0] + '"></div>';

    if ( ar[1] ) cntnt += '<div class="txt">' + ar[1] + '</div>';

    return cntnt;

}



// tooltip content here

var messages = new Array();

// array elements: image file name, optional text

messages[0] = ['mysource_files/tooltip_logos/bfp_tooltip_logo.jpg', 'Board of Finance and Property'];

messages[1] = ['mysource_files/tooltip_logos/ufs_tooltip_logo.jpg', 'Uniting Financial Services'];

messages[2] = ['mysource_files/tooltip_logos/its_tooltip_logo.jpg', 'Information Technology Services'];

messages[3] = ['mysource_files/tooltip_logos/pru_tooltip_logo.jpg', 'Property Resources Unit'];

messages[4] = ['mysource_files/tooltip_logos/psg_tooltip_logo.jpg', 'Property Services Group'];

messages[5] = ['mysource_files/tooltip_logos/fmsg_tooltip_logo.jpg', 'Finacial Management Services Group'];

messages[6] = ['mysource_files/tooltip_logos/hrg_tooltip_logo.jpg', 'Human Resouces Group'];

messages[7] = ['', 'Printer friendly version'];

messages[8] = ['', 'Email this page to a friend'];

messages[9] = ['', 'Small fonts'];

messages[10] = ['', 'Large fonts'];



// optional preloader

var imageHandler = {

    path:"mysouce_files/tooltip_logos/", // path to images

    imgs:[], preload:function() { for(var i=0;arguments[i];i++) {

    var img=new Image(); img.src=this.path+arguments[i]; this.imgs[this.imgs.length]=img;}}

}



imageHandler.preload("bfp_tooltip_logo.jpg");

imageHandler.preload("ufs_tooltip_logo.jpg");

imageHandler.preload("its_tooltip_logo.jpg");

imageHandler.preload("pru_tooltip_logo.jpg");

imageHandler.preload("psg_tooltip_logo.jpg");

imageHandler.preload("fmsg_tooltip_logo.jpg");

imageHandler.preload("hrg_tooltip_logo.jpg");

</script>[/quote]



then to initiate it have this code in the href tag


[quote]onMouseOver="doTooltip(event, messages[0] )" onMouseOut="hideTip()[/quote]



Any help and suggestions would be great.



Tim.

2

I don't believe the mysource_files/ virtual location is replaced correctly inside JavaScript blocks. However, I'm not sure, so I'd wait until a developer chimes in. :slight_smile:

3

I think they need to be directly uploaded as associated files. This:

    mysource_files/tooltip_logos/hrg_tooltip_logo.jpg


should be this

    mysource_files/hrg_tooltip_logo.jpg


Although, I could be wrong... developers...?
4

Good catch, Anthony.


Also, this:


    var imageHandler = {
        path:"mysouce_files/tooltip_logos/", // path to images


Won't work that way. The mysource_files/ path doesn't actually exist anywhere.

Edited to add that you have some time available on your Support Pack. I recommend contacting our Implementation Team for some advice on how to achieve this within the Matrix design system.
5

If the files are within a design the code should be:

    mysource_files/file_name.gif


If the files are within a folder in the site, reference to it by ID #
    

<img src="./?a=id#"></pre><br />




Hope it helps
6

Using the Asset ID is not the most efficient way of linking images from the site, because Matrix has to serve the image instead of it being served natively by Apache.


All images that are referenced by the design should be uploaded as associated files of the design and linked using the mysource_files/filename.gif format. That way, the most efficient mechanism is used to present the image in the generated HTML.