{TOOLTIP:name:tip}

[pSouper]

I had a need to create a {TOOLTIP} replacement tag so I thought I'd share it..

First: the styles: add this style to your phpwcms_template/inc_css/frontend.css file & edit at will

Code: Select all

/* TOOLTIPS STYLE*/
.tooltip{
    position:relative;
    z-index:24; background-color:#fff;
    color:#000;
    text-decoration:none}

.tooltip:hover{z-index:25; background-color:#FFFFFF}

.tooltip span{display: none}

.tooltip:hover span{ /*the span will display just on :hover state*/
    display:block;
    position:absolute;
    top:0em; left:1.5em; width:15em;
    border:1px solid #EEEEEE;
    background-color:#FFFF00; color:#000000;
    text-align: center}

Next: the replacement tag:
This code goes in whichever file you use for custom replacement rats (in phpwcms_template/inc_script/frontend_render/mytags.php)

Code: Select all

// tooltip {RT} | useage: {TOOLTIP:name,tip}
$search[n] = '/\{TOOLTIP:(.*?),(.*?)}/';
$replace[n] = '<a class="tooltip" href="#">$1<span>$2</span></a>';

REMEMBER!! replace the 'n' in both lines of the tag to the next number in the list of existing tags - use the same number for both.

If you don't have a custom tags file then create one within phpwcms_template/inc_script/frontend_render/myTags.php and use the code below...

Code: Select all

<?
// parse the $string and replace all possible instances of the following {RT}'s

function myTagParser($string) { 
	$search[0] = '/\{TOOLTIP:(.*?),(.*?)}/';
	$replace[0] = '<a class="tooltip" href="#">$1<span>$2</span></a>';
	  
  	$string = preg_replace($search, $replace, $string);
//remove all the *'s in the following two lines - they are there because phpbb will not show the code correctly :(	
$string = str_replace('&#92*;&#039*;', '&#039*;', $string);
	$string = str_replace('&amp*;quot*;', '& quot*;', $string);
   return $string;   // spit out the final webpage for display
}
// parse the whole webpage $content["all"] is the fully rendered webpage your site displays
$content["all"] = (myTagParser ($content["all"]));
?>

what are the uses?
I have listed some useages for this {RT} below
the uses are various but I use it to display 'helpfull hints' under words and images of question marks or in forms to explain what the error.gif means.

• {TOOLTIP:this is my tip for you,don't be nosey!}
• {TOOLTIP:<img src="./path/to/img1.gif">,don't be nosey!}
• {TOOLTIP:<img src="./path/to/img1.gif">,<img src="./path/to/img2.gif">}

any Q's just ask.

have fun.

[StudioZ]

Cool! Thanks for sharing pSouper !
Really sounds good and usefull.
I'm bookmarking it for future usage...

Cheers,

[frold]

demo?

[pSouper]

sorry: I can show a demo right now as the site is not live BUT I will implement it shortly and post a link.

some of you may experience an IE6 compatibitly issue as I did i if you do it may be the colours you are choosing for the background-color: :S not sure why!.
I am also unsure how to fix an opera 8.5 issue where the screen is not redrawing over the old tips: the effect is that the tooltips do not disapear :S

you may like to know...
I have also created a automatic 'Glossary' generator for the page but I have a tiny bit of tweaking before I release a beta. The script will automatically create a tooltip for any instance of a word with a 'word:glossary' list.

demo of both: tomorrow

[sustia]

Hi, I tried to implement it in the /phpwcms_template/inc_script/frontend_render/ folder, naming the file tooltip.php, but I receive this error

Code: Select all

Parse error: parse error, unexpected T_CONSTANT_ENCAPSED_STRING in /home/ortaggi/public_html/serbia/phpwcms_template/inc_script/frontend_render/tooltip.php on line 9

[pSouper]

Hi sustia,
I have noticed that phpBB likes some html tags a little too much and has decided to convert them in the code clips - i have now added *'s in the tags so that they may render in this forum correctly - you should remove the *'s wher eindicated by the comment.

[sustia]

Great pSouper, thanks a lot, now it works perfectly

[pSouper]

ok: one more thing... this tag will destroy any href info so don't expect any links to work with this tag!

obviously it will only kill the link for the word within the {RT}, no others, that would be silly

I will address this issue at some point.

[pSouper]

This script has now been superceded so I will not post or answer top this thread anymore.

please view this thread for further information