PDA

View Full Version : Sticky Tooltip script - single page for tooltips



messudieh
08-13-2010, 03:55 AM
1) Script Title: Sticky Tooltip script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm

3) Describe problem: I want to use a large amount of the same tooltips on many different pages on the same site. I am wondering if there is a way to reference a page of of tooltips instead of putting them at the bottom of every page.

Thank you much in advance! This is a great site and I just stumbled upon it.

ddadmin
08-13-2010, 07:59 AM
Hmm I'm not sure I understand yet- by reference versus putting them at the bottom of every page, do you mean a way to define the tooltips so you don't have to manually do the later on each page? Theoritically you can dynamically write out the HTML markup for each tooltip inside the .js file (using document.write()), though it's cumbersome and prune to JS syntax errors if you're not careful. Another way if your pages support it is to use SSI (http://www.javascriptkit.com/howto/ssi2.shtml) to easily include the contents of a file across pages, with the contents in this case being the markup for the tooltips.

Beverleyh
08-13-2010, 08:13 AM
If you rename your pages to end with the .php extension (instead of .htm or .html - and I'm only guessing since you havent posted a link), you should be able to use a php include;

1 - Remove this code from your pages and put it in a text file called "sticky.txt", saved in the same folder as your web pages;

<div id="sticky1">
Sticky Tooptip 1 content here...
</div>

<div id="sticky2">
Sticky Tooptip 2 content here...
</div>

<div id="sticky3">
Sticky Tooptip 3 content here...
</div>

2 - In place of the code (above) that you just removed from each page, add this line of code;

<?php include('sticky.txt');?>

Beverleyh
08-13-2010, 08:16 AM
I must have been typing while Daniel was but the SSI and php include is the same principle, so you have 2 options to play with depending on your own particular web page setup.

messudieh
08-13-2010, 01:50 PM
If you rename your pages to end with the .php extension (instead of .htm or .html - and I'm only guessing since you havent posted a link), you should be able to use a php include;

1 - Remove this code from your pages and put it in a text file called "sticky.txt", saved in the same folder as your web pages;

<div id="sticky1">
Sticky Tooptip 1 content here...
</div>

<div id="sticky2">
Sticky Tooptip 2 content here...
</div>

<div id="sticky3">
Sticky Tooptip 3 content here...
</div>

2 - In place of the code (above) that you just removed from each page, add this line of code;

<?php include('sticky.txt');?>

Thank both of you for the quick response. This site is great!

I am actually already using a bit of PHP right now (very much learning), so that's a plus. I will link the page when I get it a little better built. Would I want to include the PHP include in the header or the body? Right now the sticky divs are in the body, and you seem to describe putting that statement there, but I wanted to be sure.

Beverleyh
08-13-2010, 03:55 PM
Yes - right in the body in the same place as where those sticky div definitions would have been.

Let us know how you get on.

messudieh
08-15-2010, 07:58 PM
OK, I got the include to work, and for the most part it is working just fine. The proof of concept is here (http://twoleftfeet.net/Ken/Calendar/).

The only thing that seems to not be working right is that the option to keep the tooltip on the page just seems to disappear. When I put the code in the body of the page, everything works great, but when I move that exact same code to the included external file, it no longer shows. It doesn't seem like it makes a difference if I include the header information from the original post or not. I tried using a text, php, and html file and it didn't seem to make a difference. I kept it as an HTML because that is the last option I tried.

The PHP include statement is at the very bottom of the body of the page as well. Would it be worth trying the SSI to see if there is a different outcome?

*edit*
It's not a huge need for the 'press s to stick' section, except that I might occasionally want to include a link in the description. I can use workarounds though too and just tell them to click on the link they are hovering over.

messudieh
08-19-2010, 02:01 AM
anyone have any thoughts? I can't see why it would behave differently.

messudieh
08-21-2010, 03:55 PM
ok, I figured it out. Very strange. I needed to put the two closing </div> tags in step 2 of the original script back into the original file instead of the include. Don't quite understand that one, but it works now.

koki
11-04-2010, 09:28 PM
Hello,

i have the following problem:
i am asking the datas from sql,i put them into the div
echo'<div id="mystickytooltip" class="stickytooltip">';
echo'<div style="padding:5px">';


echo' <div id="hover'.$dogVO->id.'" >';



$dogi = $dogDAO->get($dogVO->id);




echo ".$dogi->name.";
echo'<br>';



echo'csa';
echo'<br>';
echo" .$dogi->id.";
echo'<br>';
echo" .$damId.";
echo'<br>';

echo '<img SRC="'.$dogVO->photo->reference.'" >';


echo'</div>';
echo'</div>';


echo' <div class="stickystatus"></div>';
echo'</div>';


i call the datas:
echo '<a href="'.$_SERVER['PHP_SELF'].'?id='.$dogVO->id.'" data-tooltip="hover'.$dogVO->id.'">';

The problem is i receive the correct datas into the divs,but in the tooltip it stay the same,actually the first one.How can i refresh it the tooltip?