Dynamic Tooltip Content

[egdcltd]

I want a JavaScript on mouseover tooltip that will display dyanmic content, from a MySQL database. Basically, when you move over the image, the tooltip pops up with information specific to that image. The relevant information would have already been accessed on the php page, and stored in an array.

It's on phpBB if that makes a difference

Is this possible, and if so how please?

[jscheuer1]

I am sure it is possible. How comfortable are you with modifying javascript to accept php variables?

There are a number of tool tip javascripts available here on DD as well as elsewhere. Start with a good one (make sure that it works well in all your target browsers). Then you have two basic approaches available, you may simply insert your php variables directly into the script on the page, or have an external file, which when populated by the server is a javascript array and link that .php file to the page that needs to use it as though it were an ordinary .js file, only with the .php extension. Example of linking a php file to a page as though it were an external javascript:

<script type="text/javascript" src="myscript.php"></script>

In both cases be sure that the server inserted variables do not contain any characters (usually quotes " or apostrophes ') that the array uses as delimiters unless they can be escaped using the down slash (\) at their source:

\"

or:

\'

[egdcltd]

I have a tooltip script on my site that came with a mod I installed (sorry, should have mentioned this). I would prefer to use this if possible. It's this one: http://migoicons.tripod.com/dhtips.htm

The script is referenced at the top of the page with

<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script language="JavaScript1.2" src="adr/language/lang_{LANG}/lang_adr_buildings.js" type="text/javascript"></script>

The {LANG} is a phpBB code.

The mousover script is

onMouseOver="stm(Text[100],Style[0])" onMouseOut="htm()"

This calls the relevant tooltip(100) from the earlier referenced file.

/*
Please refer to readme.html for full Instructions

Text[...]=[title,text]

Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
*/

var FiltersEnabled = 1 // If your Not going To use transitions Or filters In any of the tips Set this To 0

Text[100]=["Teleport Map","View all of the realm, Teleport if you have the scroll"]

Style[0]=["white","#FF9000","#FF9000","#242424","","","","","","","","","","",100,"",2,2,10,10,51,0.5,75,"simple","gray"]

applyCssFilter()

As you can see the tooltip called is static. I don't know if it could be made dynamic within this file, but another one could easily be referenced from the first bit of code. I don't know how much HTML can be put in the text, but it does recognize <br />

[jscheuer1]

If I have this straight, there is a file named:

lang_adr_buildings.js

that among other things contains:

Text[100]=["Teleport Map","View all of the realm, Teleport if you have the scroll"]

You could rename this file to:

lang_adr_buildings.php

and replace the above text strings in it with something like:

Text[100]=["<?php page_content(x)?>","<?php page_content(y)?>"]

Where <?php page_content(x)?> and <?php page_content(y)?> could be whatever is used to grab the data from the data base. As I mentioned before, if the string represented by either of these two server side variables contains quotes, these would have to be escaped. Say <?php page_content(x)?> represents this literal string:

Title: "Castle Keep"

in the data base, then in the data base it would need to be changed to:

Title: \"Castle Keep\"

so its quotes would not be confused with the end quotes in the array (red in the above).

You would have to call lang_adr_buildings.php on the page using its new .php extension (the language attribute has been deprecated - it's no longer needed):

<script src="adr/language/lang_{LANG}/lang_adr_buildings.php" type="text/javascript"></script>

Unless the display page itself utilizes PHP, it could have a .htm or .html extension.

[egdcltd]

Yes, it's a php with a tpl file(phpBB). I'll have a go with this and see what happens. Thanks.

[egdcltd]

Okay, I'm doing something wrong here. I've got the following code in the overall_header.tpl to enable the javascript:

<SCRIPT src="adr/includes/functions_adr_graveyard_popup.js" type="text/javascript"></SCRIPT>

The file called does exist.

Then, at the top of the tpl where I want the popup to appear, I have:

<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script src="adr/language/lang_{LANG}/lang_adr_buildings.php" type="text/javascript"></script>

But no popup is appearing

Again, that file exists, which is here:

/*
Please refer to readme.html for full Instructions

Text[...]=[title,text]

Style[...]=[TitleColor,TextColor,TitleBgColor,TextBgColor,TitleBgImag,TextBgImag,TitleTextAlign,TextTextAlign, TitleFontFace, TextFontFace, TipPosition, StickyStyle, TitleFontSize, TextFontSize, Width, Height, BorderSize, PadTextArea, CoordinateX , CoordinateY, TransitionNumber, TransitionDuration, TransparencyLevel ,ShadowType, ShadowColor]
*/

var FiltersEnabled = 1 // If your Not going To use transitions Or filters In any of the tips Set this To 0

Text[999]=["R.I.P.","<?php {L_CHARACTER_NAME} ?>"]

Style[0]=["white","#FF9000","#FF9000","#242424","","","","","","","","","","",100,"",2,2,10,10,51,0.5,75,"simple","gray"]

applyCssFilter()

And finally, in the image where the popup should appear I have:

onMouseOver="stm(Text[999],Style[0])" onMouseOut="htm()"

[jscheuer1]

Well, doing it that way will pull the value (if any) of:

<?php {L_CHARACTER_NAME} ?>

at the time that the page is loaded. From what I can see, it looks like that value is determined sometime after the page is loaded, dependant upon some action taken/occurring in a game. If that is the case, a method must be devised to read <?php {L_CHARACTER_NAME} ?> from the data base only at the time that its value is up to date. I'll kick that around a bit, but, is the above a good assessment of what you think might be happening?

[blm126]

Change

<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script src="adr/language/lang_{LANG}/lang_adr_buildings.php" type="text/javascript"></script>

to

<div id="TipLayer" style="visibility:hidden;position:absolute;z-index:1000;top:-100;"></div>
<script src="adr/language/lang_{LANG}/lang_adr_buildings.php?LCN={L_CHARACTER_NAME}" type="text/javascript"></script>

and

Text[999]=["R.I.P.","<?php {L_CHARACTER_NAME} ?>"]

to

Text[999]=["R.I.P.","<?php echo $_GET['LCN']; ?>"]

See if that works.

[jscheuer1]

blm126 & egdcltd -

blm126's suggestion is certainly worth a try but, I don't see how that would update the value in real time. If it does, I am glad and will have learned something. My idea is to pull the variable at the time that it is needed by appending a script to the page. There are probably more efficient ways to make a value like that available in real time, but attaching a script is one:

Put this script on the page:

<script type="text/javascript">
function attach(num, run){
if(!run){
Text[num]=null;
var theScript=document.createElement('script');
theScript.type='text/javascript';
theScript.src='charName'+num+'.php';
document.getElementsByTagName('head')[0].appendChild(theScript);
}
if (Text[num]!=null)
stm(Text[num],Style[0]);
else
setTimeout("attach("+num+", 1)", 60);
}
</script>

Make up a file called charName999.php and in it have this:

Text[999]=["R.I.P.","<?php {L_CHARACTER_NAME} ?>"]

Then when you do your mouseover, have it like so:

onMouseOver="attach(999);"

[egdcltd]

Currently, at the moment the problem is that the popup isn't actually popping up. I don't know if thereis a problem with passing the variables. yet.