Spry tooltip problem in IE 7 & IE 8

Does the Spry tooltip have a browser incompatibility with IE 7 and IE 8, or is there something on my test page that interferes with the function of the tooltip?
I inserted a tooltip in this page using DW CS5--very straightforward as shown on every tutorial I have found:
http://www.piie.com/dev/cite-this.htm
Yet in IE 7 and IE 8, the tooltip appears at the bottom of the page at all times. There is no activity when mousing over the trigger area ("Cite This", upper right of main content area). It is as if the js / css files are not working, so I put in absolute paths for those files.
In any event, I know that the js / css Spry tooltip files are live because in FF 3, the tooltip works exactly as expected.
The Spry tooltip files I am using show they are the latest version, 1.6.1.
Is this a browser bug, or is there something on my page that is interfering with the Spry tooltip in IE 7 and IE 8? I have tried in vain to find any information. Thanks for any pointers anyone can give me.

I checked here to find out why my
www.museumsforeningen-lf.dk works nicely with spry tooltips in firefox but not at all in explorer 8 (and didn't get any the wiser). the base jpg kind of jumps a bit but no
tips or anything. I've only just got my eyes on this spry tooltips - and have basically totally
dumped using explorer myself because it's too troublesome whatever you want to do (reading papers without a gazillion errors in particular) but
I need to accomodate the potential viewers who might use explorer (it's a
museum 'friends of'' webpage).
can this spry stuff work in explorer at all? I've tried using explorer without add-ons and with various settings in security but nothing worked. can something be done via the code - the old dears in the friends group probably aren't up to much change in settings on their browsers, but they sure do use the net.
Freya

Similar Messages

Error when adding Spry Tooltip to page with footer library

I'm using Dreamweaver CS4 and the Spry menu to apply widgets.
I was able to create a brand new page, import an image, and apply the Spry Tooltip widget successfully (as well as edit the CSS etc.).
But I run into problems when I applied it to an image on my real page, which is pretty busy, and in columns etc. I select the same image and apply the Spry Tooltip. I get this error message:
"Making this change would require changing code that is locked by a template or a translator. The change will be discarded."
Searching online, it seemed to have something to do with a region that is not editable, like a template or library item. I'm not using Templates, but I did have a few library items. The Library for my footer, which included the script for Google Analytics, was what was causing the problems.
It seems what Tooltip was trying to do was insert its script INSIDE the existing script in the Footer library - which is not editable. I needed to remove the Footer Library, apply the tooltip, then re-insert the Footer Library. This is how it needed to flow:
</div>

<div id="footer">
<p>footer copy here</p>
</div>
<script type="text/javascript">
blah blah google analytics stuff...
</script>

<div class="tooltipContent" id="sprytooltip1">Tooltip content here.</div>
<script type="text/javascript">

</script>
</body>
</html>
I think if the footer library didn't have a script in it, it would not have been an issue. It's just that the </script> was right before the </body> and it figured it could just insert the Spry code there.
I wasted an hour troubleshooting this - I wish Dreamweaver was smarter when it inserted widgets and would know where Library items started and stopped.

Select your external drive in finder.
press CMD and i
an info windows will open - what is reported as "Format" ?
anyway scroll down to the very bottom: "Sharing & Permissions"
set everyone's privilege to "Read & Write" and choose to "Apply to all enclosed items"

Spry Tooltip ok in CS 4, but not in CS 5

Hi,
something very strange has happened! I suddenly have difficulties to use tooltip in CS 5, because nothing happens when I try to insert spry tooltip. Today I tried it with my "old" CS4 AND behold, it worked well! All the tooltip files are stored in my SpryAssets directory.
Would you please help me to get to the bottom of it.
Hans-Guenter

Hans-Günter,
I have just tried it without any problems
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryTooltip.js"></script>
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet">
</head>
<body>
<p id="sprytrigger1">This is my sentence</p>
<div class="tooltipContent" id="sprytooltip1">Tooltip content goes here.</div>
<script>
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1");
</script>
</body>
</html>
Gramps

Help Needed re:Spry Tooltip and render issue with XP

I have an issue with spry tooltip and XP not sure why ?
Here it is I am designing/building a website for a restaurant, I am making use of the spry tooltip on the menu page as a rollover for a larger menu image to appear, which it does. Everything is cool in Vista etc. but if you are using XP for some reason the rollover effect only works once and then no more until the page is refreshed which is really annoying and certainly not the effect i am looking for. I know this is occuring because of this line of code :-
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> which I need to keep in.
Does ANYONE know a quick fix ? or ran into this problem before ?
I am sure the attached .JS file is the key to fix.
Thanks in advance
Andy....!

This is one of those situations you may need to see to believe,
whats happening is only on an XP IE8 browser which the ******** client is looking at (what are the odds)?
On newer systems and other browsers NO problem:-
You bring up the menu page and mouse over spry triggers and it works PERFECTLY, but only ONCE when you try again the cursor flickers as the trigger is engaged and nothing is revealed? I am sure the spry is working but somehow it is being hidden from rendering correctly as if trapped behind another image or on a delay, and then when you mouse off maybe 500ms later the image flickers into view and dissappears almost instantly. (an obvious error of some sort)
This only occurs when I place this source code in the head tags:-
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
Without code works fine, but I need to include this code for it to look as it should cross browser.
Ask me anything I will help as much as I can but right now I am at a loss !
Thanks in advance
Andy....!

Modifying the behaviour of spry tooltip - "pinning to the screen"

Hi there,
I have some spry tooltips containing content with links. These tootips are not really that large, but the links change the content of the tooltip. Often, since these tooltips contain links that may be near to the bottom of the visible tooltip content, if the linked-to content is smaller than the previous tooltip, the mouseout event will fire and the tootip will close.
The triggers for the tooltips can be quite dense in frequency, and I want to keep the delay to a minimum to help swift movement over these dense areas. The problem is that the change in size of the tooltips can catch the browser unaware, and when the tooltip closes it can be quite annoying, (as the browsing within the tooltip would have to be repeated from the first trigger to access the links in the tooltip.) Changing the hide delay option doesn't really work for me.. I want the showdelay to be quite small, so the hidedelay has to be small also.
I want to place a checkbox in the tooltip to "pin" it open. I am completely stumped on how to do this. I can quite happily place and replace the checkbox, write event handlers etc.. but the complexity of the spry tooltip code seems indecipherable for me to modify it to my needs.
I need a 'hack' that will disable the appear/disappear behaviour of the tooltip (as well as the triggers), so that leaving the tooltip or manoevering the mouse outside, and over any other triggers will not change the tooltip displayed, whilst keeping the internal content displayed with its links still working.
Then, after the checkbox is cleared, normal behaviour to resume.
If there is a simple fix,.. like duplicating the content into another div styled similarly and replacing the tooltip on screen altogether, at the same position - that'd be great... but how do I do this seamlessly and deactivate/reactivate the tooltip efficiently? I would need to access the position of the tooltip for this, So I still have trouble!
Please, any help would be greatly appreciated!!
Many thanks,
Alex

Hi Narayan,<br /><br />Thanks for pointing me in the right direction.<br />Using the following code snippet, I was able to figure out the ActionIDs that I needed to filter:<br />>// You can run this code from a codesnippet in the debug build and watch the trace output (with the Test >> Trace >> Obsolete >> Obsolete:Actions category enabled)<br /><br />>MessageToConsole ("Dumping ActionID Info begin...\n");<br /><br />>InterfacePtr<IApplication> theApp(gSession->QueryApplication());<br /><br />>InterfacePtr<IActionManager> actionManager(theApp->QueryActionManager());<br /><br />>actionManager->DumpActionInfo(IActionManager::allActionInfo);<br /><br />Namely, I need to filter kEditOriginalActionID/kLinksPanelMenuComponentBoss and kEditOriginalSelectionActionID/kLinksPanelMenuComponentBoss<br />Everything seems straighforward for the kEditOriginalSelectionActionID ActionID. I just perform my action on the links currently selected in the current document.<br />For the kEditOriginalActionID though, it is necessary for me to know which links are selected in the Links Panel.<br /><br />Any idea how I might do this?<br /><br />Thanks again,<br /><br />- Jackeen

CF inside a Spry ToolTip

I've not tried it yet but am curious if anybody has any experience with it or if it's even possible. I know any valid HTML will work inside those but I'm wondering if a simple CF email contact form inside a Spry Tooltip will function as intended. What problems might I run into and is this simply a bad idea on its face?

<script type="text/javascript">

</script>
</div>
<br style="clear:both" />
</div><br />
<div class="sizeHeader">SEE ALSO:</div>
<p> </p>
<p> </p>
<p> </p>
</div>

</div>
<div class="tooltipContent" id="sprytooltip1"> <span
class="head1"><em><img src="images/hands.jpg"
width="202" height="88" alt="Memory Foam Upgrade" /><br />
</em></span><span
class="14BIwhite"><em>Memory Foam
Upgrade</em></span><span
class="head1"><em><br />
</em></span><span class="body">Add memory
foam to the inside of <br />
your bed for a luxurious night's
sleep.</span></div>
<script type="text/javascript">

</script>
as you see there, you have a double constructor.
the first one, will search for your sprytooltip1 element but
will not find it as the page isnt fully loaded yet.
So atleast remove that one.

Spry tooltips on hotspots. Help

Hi!
I saw this question on a few places here, but it didn't answer my problem.
So, i never really used this part of DreamweaverCS4, cause my job is designing. But i need it now. Basically i have a map, and on a few towns i need to put on some more information. So at first i created the hotspot, then the tooltip, and here the problem was that the tooltip worked on the whole map, and not the hotspot...
So, i started messing around with it, and i thought i figured out that a tooltip need a trigger thing, so i wrote in the spry tooltip properties for the trigger: #town1 , and on the hotspot for the target: town1 . and when i wanted to try it out, i got this alert: Spry.Widget.Tooltip ERR: The element "#town1" does not exist in the page.
Can someone help me out? Basically just a little walkthrough on how it's done.
Thanks in forward!
TnG

Nah, sorry it's not working. BUT THANKS!
This is what I tried:
<img src="terkep.jpg" width="976" height="1372" border="0" usemap="#Map" />
<map name="Map" id="Map">
<area shape="rect" coords="198,279,282,337" href="#" alt="ns" />
<script type="text/javascript">
var tt1 = new Spry.Widget.Tooltip("apDiv1", "#myDiv", {hideDelay:500, showDelay:200, hoverClass:"toolTipHover", useEffect:"blind", followMouse:true, offsetX:"30px", offsetY:20});
</script>
</map>
But nothing seems to show up.
Also this is what i tried before (not the coding way), just using dreamweaver, but here the problem is, that spry shows up everywhere (on the whole picture):
<img src="terkep.jpg" width="976" height="1372" border="0" usemap="#Map" id="sprytrigger1" />
<div class="tooltipContent" id="sprytooltip1">Tooltip content goes here.</div>
<map name="Map" id="Map">
<area shape="rect" coords="204,287,276,329" href="#" alt="ns" />
</map>
<script type="text/javascript">

</script>

Need help in CS3 creating CS4 spry tooltip-like widgit

I am extremely new to Dreamweaver and know very little HTML and no other codes and so please bear with me if I am using some terms incorrectly.
I created an image map with hotspots. When I move the mouse over a hotspot I would like for a description box to come up with either an image and text, or just an image, whichever is easiest. I believe what I am trying to do is called an image tooltip?
I've searched all over the internet to try and find step by step instructions or a video on this, but the closest I could find was the CS4 spry tooltip widgit, which is new to dreamweaver and not part of CS3. I figured out how to put a simple text tooltip on a hotspot using "alt" but that is too basic and I need at least an image instead when I put my mouse over the hotspot.

I am extremely new to Dreamweaver and know very little HTML and no other codes
Without an understanding of HTML and CSS, you will find Dreamweaver an uphill struggle.
There are instructions to achieve what you want to do on the Spry website at http://labs.adobe.com/technologies/spry/samples/index.html. Scroll to the bottom of the page, and you'll see three links related to Spry tooltips. However, you'll have considerable difficulty implementing anything without a basic knowledge of HTML, CSS, and JavaScript. Dreamweaver is a professional tool for working with those technologies. It is not the magic wand that some people seem to expect. Spend a little time learning about web technologies, and Dreamweaver will become a joy to work with.

Spry Tooltip works in page 1, not in pg 2?

New to Dreamweaver, so please forgive my learning curve stupidity regarding Spry and fancy stuff.
I've created a Spry Tooltip series for a simple menu bar on my client's page. He wants to keep things clean and simple. The tooltips work fine on the front page of his test site here: http://www.approvalsourceleasing.com/test/myway.html
However, clicking on the "contact" link (whick has no tooltip on it) brings us to a new page using the SAME code as the first page (copy pasted) and then I simply added a new table underneath the original logo and menu with the tooltips. It can be found here: http://www.approvalsourceleasing.com/contact.html
When I "preview in browser" via Dreamweaver the page displays properly, but when you click the link and view it for real it does not. The tooltips do not work, and the text for the tooltips is located on the bottom of the page--no error messages. I've tested this in IE and Firefox and I get the same result.
I'm not sure what I did wrong.
Thank you in advance!

Yes, thank you. I figured it out late last night thankfully. My SpryAssets folder wasn't reading properly on the second page. I just needed to re-upload it.

Spry menu problem - CS6 Dreamweaver

I wonder if anyone can help me with my spry menu problem which I have with a fixed 960px wide horizonal menu bar that has 8 items in it. The sub-menus don't seem to display properly when you click on them in that some of the submenus only show up at the end of the menu bar itself in Explorer browsers 8/9. Does anyone know of any code I can apply to fix this problem? I am new to spry menu features and so any help would be very much appreciated.

Also validate the rest of the code in your pages to see if you have any critical errors that need fixing. For example, a missing doc type declaration might explain Spry failures.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
As an FYI, Adobe abandonded the Spry Framework late last year, after CS6 was released because Spry drop-menus don't hold up well on touch screen devices. If you can't get satisfaction with Spry, try jQuery Superfish. It's a better menu system.
http://users.tpg.com.au/j_birch/plugins/superfish/
Nancy O.

Issue attaching spry tooltip to anchor tag.

Hi
I'm trying to attach a spry tooltip to this tag.
<a href="'.$link.'" id="trigger">'.$job['name'].'</a>
The idea being dynamic data from database can be displayed in the tooltip when user hovers over the link.
I get the message 'you cannot insert a tooltip on the selected tag'.
Any ideas much appreciated.

Hi there
Why are you editing the JavaScript file? Did you know that when generating FlashHelp you have an option to turn off the Show link?
Additionally there are ways to link to topics so the TOC is visible and synchronized. These are described at this link right here.
Cheers... Rick
Begin learning RoboHelp HTML 7 within the day - $24.95!
Click here for Adobe Authorized Captivate and RoboHelp HTML Training
Click here for the SorcerStone Blog
Click here for RoboHelp and Captivate eBooks

Spry Tooltip is missing on Spry menu in CS3?

I cannot find the Spry Tooltip on my Spry Menu in DW CS3? I have run the Site/Spry Updater but Tooltip is not listed?
How do I add/update my DW Spry menu to include all available Spry Widgets, tools, etc?
Thanks,
jlig

Arnout, Thanks for the reply..
However, I have read thru that document and still not sure how to:
- Apply the Spry Tooltip widget to a small Image on my page
I have already copied the two SpryTooltip.css & SpryTooltip.js files into my Spry folder & uploaded to the site
Just not sure how to apply them to the Image?

Dynamic Spry Tooltips

I have a glossary XML document that I use Data Sets in our website.
I want to be able to dynamically traverse the XML DOM to be able to pull the innerXML to insert into Spry Tooltip dynamically.
The approach I am taking is to dynamically load a hidden Iframe with the XML Document, then parse the XML to filter out the content I need for each temr that has definition associated with it. However, I can not seem to get past this point to load into the tooltip div container.
Any suggestions?

In case you missed it
                        Announcement:
                        New to Spry, or the Spry forums?
Before you post a topic please verify that:
You are using the latest Spry files
The
latest version of the Adobe Spry Framework is 1.6.1, this is the same
version that ships with Dreamweaver CS4. If you use Dreamweaver CS3
(uses Spry 1.4), its wise to upgrade your files to the latest version.
This can easily be done using the Spry Updater that can be found here.
Your question was not asked before
Using
the search functionality on forums you can easily find out if your
question has been answered before. While you are in search, you can
specify the search locations. The Spry forum can be found under:
Adobe Labs > Spry Framework for Ajax
Yoru question can not be found in the existing documentation
Spry
provides you with allot of documentation this can found on different
locations. In the sidebar of this forum you can find a small summary of
resources that will help you on your way.
If
these options do not apply to your question, please be so kind to also
supply the following information in your topic together with a clear
description of your issue:
What browsers does this issue occure:
example: Internet Explorer 8 on Window 7 and Firefox 3.0 on Mac OSX
What version of Spry are using:
example: Spry 1.6.1 ( the version number can be found in license header of the .css and .js files )
What is the url of your website or page in issue:
example: http://www.example.com/page/in/issue.html
Step to reproduce the issue:
example:
Scroll down till you find the header "help", there you will see a Spry
Accordion. When you click on it it will not open or close.
So users can provide you with a better answer, without having to ask you for further details.
                        by Arnout Kazemier
                        at Oct 23, 2009 2:47 PM

Spry Tooltips That Don't Extend The Page

I am working on an intranet based returns system, and I am having a problem with tooltips that are 600px wide. If the tooltip is triggered near the edge of the page the tooltip will make the page wider, causing a scrollbar appear. It is impossible to scroll the page due to the tooltip vanishing once you move the mouse away.
I can't see any options to prevent this from happening. Does anyone have any clever ideas?
Cheers,
Steve

Hi Beth,
Thanks for the suggestion, it appears you are getting around this by offsetting each tooltip. This works for you as your triggers are small and in known locations.
I am using a repeated table cell as the trigger to load html content into a panel which is the tooltip:
<script type="text/javascript">

</script>
This means my tooltip can appear all over the place. I will a large negative offset and see if its just as functional.
Cheers,
Steve

Need help with Dreamweaver Spry Tooltips.

Hello, all. First off I gotta say that I am new to this so PLEASE go easy on me here.
Okay, I created some Spry tootips on an image in Dream weaver. Everything worked well in the live view, everything came out as I hoped. But when I uploaded everything the tooltips are on the screen but don't pop up the way(s) they are supposed to. I did not create the site in Dreamwever, I simply created the image map in Fireworks, and imporetd the HTML into Dreamweaver.
Here is the page:
http://thealamedapirates.org/index.php?option=com_content&view=article&id=56&Itemid=81
And here is the code on the page: THANK YOU!!!!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Eqp2</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script src="http://thealamedapirates.org/SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="http://thealamedapirates.org/SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
</head>
<body bgcolor="#ffffff">
<img name="Eqp2" src="http://thealamedapirates.org/content/Eqp/Eqp2.png" width="302" height="504" border="0" id="Eqp2" usemap="#m_Eqp2" alt="" />
<map name="m_Eqp2" id="m_Eqp2">
<area shape="poly" coords="72,81,124,79,127,114,204,114,206,79,260,79,260,148,73,148,72,81" href="javascript:;" alt="Shoulder Pads" id="sprytrigger3" title="Shoulder Pads" />
<area shape="rect" coords="0,448,73,505" href="javascript:;" alt="Cleats" id="sprytrigger6" title="Cleats" />
<area shape="rect" coords="73,287,212,397" href="javascript:;" alt="Leg Pads" id="sprytrigger5" title="Leg Pads" />
<area shape="rect" coords="95,236,212,287" href="javascript:;" alt="Girdle" id="sprytrigger4" title="Girdle" />
<area shape="rect" coords="138,80,195,110" href="javascript:;" alt="Mouth Piece" id="sprytrigger2" title="Mouth Piece" />
<area shape="rect" coords="119,3,212,82" href="javascript:;" alt="Helmet" id="sprytrigger1" title="Helmet" />
</map>
<div class="tooltipContent" id="sprytooltip6"><br />
<img src="../../EQP Images/molded2.jpg" width="63" height="68" alt="Cleats" longdesc="http://thealamedapirates.org/content/Eqp/parts/molded2.jpg" /> <img src="../../EQP Images/screw-cleats.jpg" width="63" height="67" alt="Screw-Ins" longdesc="http://thealamedapirates.org/content/Eqp/parts/screws.jpg" /><br />
Cleats:<br />
They can be molded or screw-in bottoms.<br />
No metal tip cleats allowed. Make<br />
sure they are laced, and tied all the way up!
</div>
<div class="tooltipContent" id="sprytooltip5"><br />
<img src="../../EQP Images/legpads.jpg" width="70" height="72" alt="Leg Pads" longdesc="http://thealamedapirates.org/content/Eqp/parts/legpads.jpg" /><br />
Leg pads:<br />
2 Hip pads, 1 tail bone pad, 2 thigh pads, <br />
and 2 knee pads. All 7 pads must be worn at<br />
all times. </div>
<div class="tooltipContent" id="sprytooltip4">
<p><img src="../../EQP Images/girdle.jpg" width="73" height="79" alt="Girdle" longdesc="http://thealamedapirates.org/content/Eqp/parts/girdle.jpg" /><br />
Girdle: <br />
    Worn under the pants. All leg pads are <br />
    inserted into the girdle. </p>
</div>
<div class="tooltipContent" id="sprytooltip3">
<p><img src="../../EQP Images/ShPads.jpg" width="119" height="103" alt="Should Pads" longdesc="http://thealamedapirates.org/content/Eqp/parts/ShPads.jpg" /><br />
Shoulder Pads.</p>
</div>
<div class="tooltipContent" id="sprytooltip2">
<p><img src="../../EQP Images/Mpiece.jpg" alt="mouth piece" width="102" height="55" align="textop" /><br />
    Mouth Piece:<br />
    Can be any color except white and<br />
    clear. <br />
Must be in at all times. </p>
</div>
<div class="tooltipContent" id="sprytooltip1">
<p> </p>
<p>Helmet and Chinstrap:<br />
    Must be on and buckled up at all <br />
    times. </p>
</div>
<script type="text/javascript">
var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1", {useEffect:"fade", showDelay:500, hideDelay:200});
var sprytooltip2 = new Spry.Widget.Tooltip("sprytooltip2", "#sprytrigger2", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip3 = new Spry.Widget.Tooltip("sprytooltip3", "#sprytrigger3", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip4 = new Spry.Widget.Tooltip("sprytooltip4", "#sprytrigger4", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip5 = new Spry.Widget.Tooltip("sprytooltip5", "#sprytrigger5", {showDelay:500, hideDelay:200, useEffect:"fade"});
var sprytooltip6 = new Spry.Widget.Tooltip("sprytooltip6", "#sprytrigger6", {showDelay:500, hideDelay:200, useEffect:"fade"});
</script>
</body>
</html>

S.C.Davison wrote:
Thanks for the reply.
Is there a way to fix that seemingly minor issue?
If it is a minor issue, I wouldn't bother about it, although the problem seems to persist throughout your document as per http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fthealamedapirates.org%2Findex.php %3Foption%3Dcom_content%26view%3Darticle%26id%3D56%26Itemid%3D81
As said, this is an issue caused by your blog software and although it affects a Spry widget, it is not a Spry issue.
My advice, hard code into your document and do not use TinyMCE to code the document.
Gramps

Spry tooltip problem in IE 7 & IE 8

Similar Messages

Maybe you are looking for