ICal event detail in tool tip?

Is there some way to display a tool tip showing event details by hovering over an event with the mouse? Is there a plug in or something that can add this feature?

That's a really cool feature request... that would be really handy for me, too. I don't think that is possible, but here's an idea which might be "good enough" for you. Everybody on these boards knows that I love BusyCal (which is an iCal replacement that syncs with iCal)... BusyCal has an "info panel" that you can set to always show, sort of like the "info panel" in iPhoto. With this info panel showing, all you have to do is click once on the event, and the details will immediately show up in the info panel. Not quite the same as hovering over an event, but at least it's only one click instead of 2 clicks.

Similar Messages

ICal event detail..

Hi,
In the old ical version (pre-leopard), there was a drawer or window, with event details.
It had the time, notification, attendee's, etc.
I know you can now get event details by double clicking on the event but I liked the old style better. It was quick, easy and always visible.
Is there a way to have that drawer or window, turned back on ??
Thanks,
B

B,
Is there a way to have that drawer or window, turned back on ??
Search Discussions with the term info drawer, and you will see plenty of evidence that it is not (currently) possible with the Leopard version of iCal.
;~)

ICal Event Details

When entering iCal events or when looking at events that were previously entered, the dates that appear are correct, but the day of the week is always Saturday, regardless of the event's actual date. How can I fix this problem so that the correct day of the week appears my events ?

Not quite sure what you mean by "details", but after touching Edit for the event, touch the lines with the name and location and a cursor shows with the keyboard to edit those.
Note that you won't be able to edit Exchange synced calendars.
Also note that "iCal" is the OS X app. The iOS app on your iPhone is "Calendar."

Ical event details time different that display time

For some odd reason the event details of any event on any of my ical calendars comes in one hour earlier than the time listed as the start time "today", "list", "day" or "month" listing of events. Only when I go to the event details of any given particular event do I see it listed as having a start and end time exactly one hour before the time the time given in any other part of the ical software. huh? I've gone through all the drama of time zone shifts and timei zone support, so I don't think that is the issue. This is a just the difference between it saying my meeting starts at 3 (which it does) everyone except on the detail for that particular meeting which shows it starting at 2. uhg. Can someone help?
Thanks

Welcome to the forums, Leslie. Do you mean in Month view? I haven't found a way to show end time in Month view, but it shows automatically in Day and Week views.

Ical events showing in week view as an hour later than the details in event

Hi all,
I've just been upgrading my ical / mobileme and I can't figure this out. All time zones are set to London-UK. If I look up appointments in week view all my calendars are colour coded. One particular calendar appears 1hr late with appointments. When I go into the details of this even it show correct time. For example. Kids school looks like it's in for 9:50 in week view but when I go into appointment it reads the correct time of 08:50?
Any ideas. Thanks

Andrew,
Is there any way of dragging and dropping an iCal event showing in week view across to a date in the left sidebar monthly calendar?
No, but you can use cut/paste. Cut (⌘X) the event, then click on the week where you want to move the event, and Paste (⌘V).
If you have a suggestion for Apple to change that method use: Apple - Mac OS X - Feedback.

How do I get rid of event details in iCal in iOS?

I'm trying to learn how to get rid of event details in iCal on my iPhone. With the event itself "edit" comes up when I touch the item. For event details, however, the "edit" option does not appear.

Not quite sure what you mean by "details", but after touching Edit for the event, touch the lines with the name and location and a cursor shows with the keyboard to edit those.
Note that you won't be able to edit Exchange synced calendars.
Also note that "iCal" is the OS X app. The iOS app on your iPhone is "Calendar."

CM25 Tool-Tip Component Details

Hi There,
On the planning board in CM25, we would like the ability to hover over an order, and receive a pop-up tool-tip that gives the user some information about the order. This means the user won't have to keep clicking into orders to see the detail of the order.
I have been told by one of my colleagues that they were on a project where this had been achieved before, but I can see no way of doing this. Has anyone any experience of meeting such a requirement?
Many Thanks,
Colm

Hi
Try with authorization objects. For instance with
C_AFKO_ATY
C_AFKO_AWA
C_AFKO_AWK
Check them in tcode SU24
Regards
Eduardo

EDITED BY in the Event Details of iCal

So .. a new fun added item when in iCal on my iPhone is the "EDITED BY" when I go to an Event Details of a shared calendar. Again .. this only appears when I access iCal on my phone ... it doesnt appear when on my laptop/desktop/ipad.
I'd REALLY like to not have it... any ideas?
Thanks!

Looks like 10.6.3 update solves this
iCal fixes provided for:
changing the invitation list for a single instance of a recurring event will no longer "un-book" the location of the meeting.
an issue in which new invitations on a Microsoft Exchange server might not appear in the Notification pane.
properly showing recurring Microsoft Exchange events which have a set end date. For details, see this article.

Can't edit iCal events like before installing Snow Leopard.

When creating a New Event or trying to Edit an existing Event the title field isn't editable like before I installed Snow Leopard. If I try to click on the header field to edit it, the whole event box turns into a window with red & green buttons at the top and I STILL can't edit the title area! This doesn't make sense! Did something go wrong installing Snow Leopard? I've reinstalled it twice and still the same behavior. This can't be the way things are supposed to work editing events in iCal. I can edit the location and all the other fields in the event panel, but NOT the title. The only way I can try to edit the event title is by hitting the enter key and try to add characters before it switches to an un-editable field again.

Perhaps you've just updated your OS and now have the newer version of iCal which is ***** compared to the faster, more elegant older version. The older iCal presented every event's details in a ready to edit format just by clicking on the item in the calendar.
Now you have to double click that item you're interested in (one two) to get a window that shows you the item's details. Then, to edit, you must click the 'edit' button (three) upon which another editable window will allow your event details to be edited. Finally, after finishing your edits, you must click 'done' (four). Yes, that's right, 4 clicks to do what used to require only the initial click to specify which event you wanted to edit.
Four times as many clicks for a utility application that has no further improvements, only this annoying change from what was once a very efficient tool.
I do hope a future "update" will bring back the elegance of the older version with some true improvements.

Advanced APEX Tips and Techniques (tool tip, VCF), queries...

Hi everyone,
First of all, I would like to thank the community for their help.
I have been working with APEX since a few months (December) ago, since then it has captivated most of my attention, because of what can be done with it…
This time I would like to ask for your advice about some new topics (tool tip and VCF or saving contacts) in regard to APEX, I created a calendar application –works as it meant to be- but now got some question to which I have not yet found an answer, (I have already looked on some online info).
1). Regarding to tool tip: as I mentioned before I have created a calendar application, and on it I am linking the events (specifically on calendar region) on it to some other pages, in the link that leads to the page I have put this:
select '<a title="TGB SCHEDUL" href="f?p=&APP_ID.:5:' || :APP_SESSION || '::::P5_ID: ' || ID || '">' || EVENT_NAME|| '</a>
' EVENT_NAME, START_DATE
from APP_TGB
This script does what it is meant to do link to a specific page. As I understand tool tip, if I want some message I have to place the comments on the title=''#COMMENTS#'' as I am using mozilla, as you can see I have a phrase and I would like to adjust it to every event in particular, I thought in using bind variables, so I look in google about how to create it, found how to... but no where to apply.
2). In concern to the VCF, I saw an example and tried to adjust it to my needs, but apparently I have done something inappropriate.
DECLARE CURSOR member_cur IS
SELECT id, quarter_fy08, kind_of_campaign, event_name, owner, partner, associationcollaboration, location, presales, marketing, chanel_manager, territory_manager, start_date, end_date, list, emailing, telemk, status, source_code_omo, attendees, leads, opps, budget, pipe_estimado, objetives, comments
FROM app_tgb
WHERE id = (
SELECT ' f?p=&APP_ID.:5: '||:APP_SESSION||'::::P5_id: '||id||' '
FROM APP_TGB
BEGIN
htp.init; -- wipe out the buffer
owa_util.MIME_HEADER('text/x-vcard; method=request');
for member_rec in member_cur loop
--Get the member information
htp.print('BEGIN:VCARD');
htp.print('VERSION:3.0');
htp.print('Event Details:');
htp.print('Event ID (consecutive number):' || member_rec.id);
htp.print('Quarter FY:' || member_rec.quarter_fy08 || ';;Event Name:' || member_rec.event_name ||';;Kind of Campaign:' || member_rec.kind_of_campaign);
htp.print('Start date:' || member_rec.start_date ||';;End date:' || member_rec.end_date ||';;Location:' || member_rec.location);
htp.print('Partner:' || member_rec.partner ||';;Association/Collaboration:' || member_rec.associationcollaboration);
htp.print('Owner:' || member_rec.owner ||';;Marketing:' || member_rec.marketing ||';;Presales:' || member_rec.presales);
htp.print('Chanel Manager:' || member_rec.chanel_manager ||';;Territory Manager:' || member_rec.territory_manager);
htp.print('Call for Entries:');
htp.print('List:' || member_rec.list ||';;Emailing:' || member_rec.emailing ||';;Telemk:' || member_rec.telemk);
htp.print('Event status:');
htp.print('Status:' || member_rec.status ||';;Emailing:' || member_rec.emailing ||';;Source Code (OMO):' || member_rec.source_code_omo);
htp.print('Investment & Results:');
htp.print('Attendees:' || member_rec.attendees ||';;Leads:' || member_rec.leads ||';;Opps:' || member_rec.opps);
htp.print('Budget:' || member_rec.Budget ||';;Pipe Estimado:' || member_rec.pipe_estimado ||';;Objetives:' || member_rec.objetives);
htp.print('Comments:');
htp.print('Comments:' || member_rec.comments);
htp.print('REV:20050707T234724');
htp.print('END:VCARD');
end loop;
END;
3). Referring to user groups, I have read on chapter 8, that creating groups I will be able to restrict access to various parts of an application, so I did create them and applied them but once again something happens.
Re: authorization scheme methods/techniques
What I am trying to do with the users, is to restrict their access to specific pages, so for example let's say that I do have these pages.
Start, calendar, insertion, update and report, on the start page I have a link to the insertion page, that I want it to be accessed just by those users who have some privileges (which I understand can be done with groups, to manage who can access to a page and who can not.), and to allow other user to go around to the allowed areas.
I do appreciate any kind of help or guidance.
Best regards,
Jaison José González Chaux

ABOUT VCF IN APEX
Hi everyone,
This time I will like to ask you for some advise in regard to VCF, the picture is this.
VCF in theory is working and on practice is working more or less… I say more or less because of this…
This is a small idea of my application.
I have a test application on APEX that is a calendar to insert data, on the page where I do have the calendar I have some hyperlinks for insertion and for viewing the reports, and on the calendar itself I do have a link for updating the event.
I have assigned the VCF file to the updating page (page that is linked from the calendar) and bring in the values that are meant to be, in theory it should create the VCF file well but it does not.
The only way it does create the VCF file is when I insert a new registry, click insert and then on the status bar of the browser (in my case mozilla firefox) hit the back button, then the VCF file is created as it’s meant to be.
I will appreciate if anyone can give me a hint, a suggestion, anything :)
I will attach the code I use for the VCF file.
declare
cursor user_cur is
select ID, OWNER
from APP_TGB
where ID = :p2_ID;
l_ID number;
l_OWNER varchar2(60);
begin
htp.init; -- Wipe out the buffer
owa_util.MIME_HEADER('text/calendar; method=request');
-- Get the event information
htp.print('BEGIN:VCALENDAR');
htp.print('PRODID:-//Microsoft Corporation//Outlook 9.0 MIMEDIR//EN');
htp.print('VERSION:2.0');
htp.print('METHOD:PUBLISH');
htp.print('BEGIN:VEVENT');
htp.print('ORGANIZER:MAILTO: [email protected]');
htp.print('LOCATION: Application ' || :APP_ID);
htp.print('TRANSP:OPAQUE');
htp.print('SEQUENCE:0');
htp.print('Today is: ' || to_char(sysdate, 'yyyy-mm-dd') || ' ' || to_char(sysdate, 'hh24:mi:ss'));
htp.print('OWNER: (' || nvl(v('P2_OWNER'),l_OWNER) || ') ');
htp.print('PRIORITY:5');
htp.print('CLASS:PUBLIC');
htp.print('BEGIN:VALARM');
htp.print('TRIGGER:PT60M');
htp.print('ACTION:DISPLAY');
htp.print('DESCRIPTION:Reminder for account expiring');
htp.print('END:VALARM');
htp.print('END:VEVENT');
htp.print('END:VCALENDAR');
end;
The distribution of my pages is the following:
1. pag_inicio, the form of referring to it is p1_”any-atribute”… on this page there are the hyperlinks (insertion and report viewing) and the calendar itself.
2. pag_insertion, the form of referring to it is p2_”any-atribute”… on this page there are the insertion fields and a VCF button, create and cancel ones.
3. pag_update, the form of referring to it is p3_”any-atribute”… on this page there are the fields where the information is brought up, and a VCF, update and cancel buttons.
4. pag_report, the form of referring to it is p4_”any-atribute”… on this page you can see the fields in a report format.
5. checking_events, the form of referring to it is p5_”any-atribute”… this page is like the updating one, but with letting the user modify any value, it has a VCF.
6. pag_VCF, where the VCF code is.
I do appreciate your help and guidance.
Best regards,
Jaison J. González Chaux

JSlider + Display value in a text tool tip box

Hello,
I am new to Java. I want to display the value in a text tool tip box of the JSlider as the user moves the knob . Is there any way to achieve this.
I tried setting up the value of text tool tip in the stateChanged method. But that didn't helped
Ritesh

Finally Got it working. Below I am attaching the code for reference
Thanks for your code. It came very handy
The only problem is that toolTextTip is appearing on one side rather than below the cursor.
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.event.*;
public class EventTest
public static void main(String[] args)
JFrame f = new JFrame();
System.out.println("starting application");
f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
f.getContentPane().add(new setSlider(),"North");
JSlider slide = new JSlider();
slide.setToolTipText("Hello");
f.getContentPane().add(slide,"South");
f.setSize(400,400);
f.setLocation(200,200);
f.setVisible(true);
class setSlider extends JSlider implements ChangeListener, MouseMotionListener{
public setSlider(){
setToolTipText("hello " + new Integer(getValue()).toString());
this.setMaximum(10);
this.setMinimum(0);
this.setValue(2);
this.setMajorTickSpacing(2);
this.setMinorTickSpacing(1);
this.setPaintTicks(true);
this.setPaintLabels(false);
this.addMouseMotionListener(this);
this.addChangeListener(this);
public void stateChanged(ChangeEvent e) {
setToolTipText(new Integer(getValue()).toString());
System.out.println(this.getToolTipText());
KeyStroke controlF1 = KeyStroke.getKeyStroke("control F1");
ActionListener toolTipAction = getActionForKeyStroke( controlF1 );
if (toolTipAction != null)     {
ActionEvent postTip = new ActionEvent(this, ActionEvent.ACTION_PERFORMED, "");
toolTipAction.actionPerformed( postTip );
public void mouseDragged(MouseEvent e){
System.out.println("here");
setToolTipText(new Integer(getValue()).toString());
System.out.println(this.getToolTipText());
KeyStroke controlF1 = KeyStroke.getKeyStroke("control F1");
ActionListener toolTipAction = getActionForKeyStroke( controlF1 );
if (toolTipAction != null)     {
ActionEvent postTip = new ActionEvent(this, ActionEvent.ACTION_PERFORMED, "");
toolTipAction.actionPerformed( postTip );
public void mouseMoved(MouseEvent e){

Ical Help needed- can not delete a four year ical event

I accidentally sent an ical event that lasts for four years and now I he cant delete it and it is taking up more and more memory on his phone as it is repeating infinitly every day?? Have tried restore but it still syncs with icloud. is there an easy solution?

First you have to know which calendar your client saved the event to. Usually by default it saves to the native Calendar app. If that is the case, he should be able to log into iCloud and delete the event (decline the invitation) from there. If your client saved the event to an external calendar that he has synched to his iPhone (Yahoo, Google, etc.) he may be able to delete it or decline it from there, which should in turn remove it from the device.
The logic here is that only the creator of the event invitation can edit the event details, so that if they do that, all of the recipients of the invitation will get the updated information automatically. I agree it leaves a lot to be desired to stick things on people's calendars that they can't at the very least just simply delete if not edit. I will no longer accept invitations directly on my device in order to avoid this. I will add the event to my calendar manually from now on.
HTH

My custom Tool tip on spark data Grid don't work ?

I want to add panel component as my tooltip for each row in my Spark DataGrid. So when mouse rollover the user can see the information for each the ship. I want a panel as my tooltip for dataGrid cause I want to organize my data neatly and also place a image in the panel.
I came across :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html where they show an example of "Implementing the IToolTip interface" using the panel.I tried manipulating the codes but it didt work for my spark dataGrid.
So my question :
Can some one pls show me how I can use the Panel as my tool tip for each row in spark data grid.
I have been struggling for quite some time.If possible pls Give me an example.
This is my codes below (I tried to follow the example from :http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf60d65-7ff6.html#WS2d b454920e96a9e51e63e3d11c0bf60d65-7ff4 -"Implementing the IToolTip interface")
My MXML Application codes :
    <fx:Script>
    <![CDATA[
        import DesignItemRenderer.PanelToolTip;
        import mx.events.ToolTipEvent;
        import mx.collections.ArrayCollection;
        import mx.controls.Alert;
        import spark.events.GridEvent;
        [Bindable]
        private var myArrivalShips:ArrayCollection = new ArrayCollection([
            {arrivalShipsName:"Ship A", ETD:"12 March"},
            {arrivalShipsName:"Ship B", ETD:"25 March"}
        private function createCustomTip(event:ToolTipEvent):void {
            var ptt:PanelToolTip = new PanelToolTip();
            ptt.title = "my Ship Info";
            ptt.bodyText = "my data for the ship";
            event.toolTip = ptt;
    ]]>
</fx:Script>
<s:BorderContainer x="267" y="11" width="331" height="586">
    <s:DataGrid id="arrivalTable" x="10" y="326" width="302" height="205" requestedRowCount="4" dataProvider="{myArrivalShips}" toolTipCreate="createCustomTip(event)">
        <s:columns>
            <s:ArrayList>
                <s:GridColumn dataField="arrivalShipsName" headerText="Arrival Ships" ></s:GridColumn>
                <s:GridColumn dataField="ETD" headerText="ETD"></s:GridColumn>
            </s:ArrayList>
        </s:columns>
    </s:DataGrid>
    <s:BorderContainer x="10" y="19" width="302" height="285">
    </s:BorderContainer>
</s:BorderContainer>
My Custom Panel codes :
<s:Panel xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
     implements="mx.core.IToolTip" >
<fx:Declarations>
    
</fx:Declarations>
<fx:Script>
    <![CDATA[
        [Bindable]
        public var bodyText:String = "";
        // Implement required methods of the IToolTip interface; these
        // methods are not used in this example, though.
        public var _text:String;
        public function get text():String {
            return _text;
        public function set text(value:String):void {
    ]]>
</fx:Script>
<s:RichText text="{bodyText}" percentWidth="100"/>
</s:Panel>

Ok I was getting ready to post the renderer code and then found the problem. I had copied this code from another renderer which had contentBackgroundAlpha=0 in the MXAdvancedDataGridItemRenderer tag. When I removed it, the style of the TextArea worked as intended. Your comment helped me to take a closer look at the renderer code, so thank you.

How to get rid of annoying tool tips while editing SQL files

I'm using Visual Studio 2013 to edit an .SQL file and I have attached the editor to a local SQL Server 2008 R2 database.
While editing the string that is passed to a sp_executesql procedure it keeps popping up a tool tip saying:
"Parameter help is not supported for extended stored procedures"
Generally I don't care about that and it is annoying because it keeps appearing over the top of the text I want to read. Is there any way to stop Visual Studio doing this?
a

Hi aptitude,
Thank you for posting in the MSDN forum.
>>I'm using Visual Studio 2013 to edit an .SQL file and I have attached the editor to a local SQL Server 2008 R2 database.
Could you share us more information about this issue? You said that you edit the .sql file, which kind of app did you create which would use the .SQL file? Whether it is related to the SQL Server database project or others?
If it is related to the SQL Server Database project, please post this issue to the SSDT forum:
https://social.msdn.microsoft.com/Forums/sqlserver/en-US/home?forum=ssdt
>>While editing the string that is passed to a sp_executesql procedure it keeps popping up a tool tip saying:"Parameter help is not supported for extended stored procedures".
Reference:
https://technet.microsoft.com/en-us/library/ms175170%28v=sql.105%29.aspx
https://msdn.microsoft.com/en-us/library/ms188001(v=sql.105).aspx
But if it is related to the SQL Server, to really repro this issue, and make sure that whether this warning is related to the SQL scrip or others, maybe you could select a better forum here:
https://social.msdn.microsoft.com/Forums/sqlserver/en-US/home?category=sqlserver
If I have misunderstood this issue, maybe you could share us a simple sample and the detailed steps in your new reply, so we could really repro this issue in our side.
In addition, I did some research about the warning message:
https://msdn.microsoft.com/en-us/library/ms173434.aspx?f=255&MSPPError=-2147217396
The IntelliSense functionality of the Database Engine Query Editor does not support all Transact-SQL syntax elements. Parameter help does not support the parameters in some objects, such as extended stored procedures. For more information, see
Transact-SQL Syntax Supported by IntelliSense.
In SQL Server, it seems that it is related to the IntelliSense, I'm not very sure that whether it is related to the IntelliSense of VS IDE, but generally we could enable or disable IntelliSense under TOOLS->Option->Text Editor in VS
IDE.
Maybe you could disable IntelliSense in VS IDE, and then check it again.
If I misunderstood this issue, please feel free to let me know.
Best Regards,
Jack
We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
Click
HERE to participate the survey.

Tool tip to not move

Hi I'm a big fan. long time lurker first time poster
Currently the position of the tool tip depends on where the cursor first hovers over the image. Is there a way for the tool tip to appear in the same place no mater where the image is hovered?
below is the js and css
thanks
// SpryTooltip.js - version 0.9 - Spry 1.6.1
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.BrowserSniff = function()
var b = navigator.appName.toString();
var up = navigator.platform.toString();
var ua = navigator.userAgent.toString();
this.mozilla = this.ie = this.opera = this.safari = false;
var re_opera = /Opera.([0-9\.]*)/i;
var re_msie = /MSIE.([0-9\.]*)/i;
var re_gecko = /gecko/i;
var re_safari = /(applewebkit|safari)\/([\d\.]*)/i;
var r = false;
if ( (r = ua.match(re_opera))) {
this.opera = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_msie))) {
this.ie = true;
this.version = parseFloat(r[1]);
} else if ( (r = ua.match(re_safari))) {
this.safari = true;
if(parseFloat(r[2]) < 420)
this.version = 2;
else
this.version = 3;
} else if (ua.match(re_gecko)) {
var re_gecko_version = /rv:\s*([0-9\.]+)/i;
r = ua.match(re_gecko_version);
this.mozilla = true;
this.version = parseFloat(r[1]);
this.windows = this.mac = this.linux = false;
this.Platform = ua.match(/windows/i) ? "windows" :
(ua.match(/linux/i) ? "linux" :
(ua.match(/mac/i) ? "mac" :
ua.match(/unix/i)? "unix" : "unknown"));
this[this.Platform] = true;
this.v = this.version;
if (this.safari && this.mac && this.mozilla) {
this.mozilla = false;
Spry.is = new Spry.Widget.BrowserSniff();
Spry.Widget.Tooltip = function(tooltip_element, trigger_selector, options)
options = Spry.Widget.Utils.firstValid(options, {});
this.init(trigger_selector, tooltip_element, options);
if (Spry.Widget.Tooltip.onloadDidFire)
this.attachBehaviors();
Spry.Widget.Tooltip.loadQueue.push(this);
Spry.Widget.Tooltip.prototype.init = function(trigger_element, tooltip_element, options)
var Utils = Spry.Widget.Utils;
this.triggerElements = Utils.getElementsByClassName(trigger_element);
this.tooltipElement = Utils.getElement(tooltip_element);
options.showDelay = parseInt(Utils.firstValid(options.showDelay, 0), 10);
options.hideDelay = parseInt(Utils.firstValid(options.hideDelay, 0), 10);
if (typeof this.triggerElements == 'undefined' || !(this.triggerElements.length > 0))
this.showError('The element(s) "' + trigger_element + '" do not exist in the page');
return false;
if (typeof this.tooltipElement == 'undefined' || !this.tooltipElement)
this.showError('The element "' + tooltip_element + '" do not exists in the page');
return false;
this.listenersAttached = false;
this.hoverClass = "";
this.followMouse = false;
this.offsetX = 15;
this.offsetY = 15;
this.closeOnTooltipLeave = false;
this.useEffect = false;
Utils.setOptions(this, options);
this.animator = null;
for (var i =0; i < this.triggerElements.length; i++)
if (!this.triggerElements[i].className)
this.triggerElements[i].className = '';
if (this.useEffect){
switch (this.useEffect.toString().toLowerCase()){
case 'blind': this.useEffect = 'Blind'; break;
case 'fade': this.useEffect = 'Fade'; break;
default:
this.useEffect = false;
this.visibleTooltip = false;
// Hack for FF 3 - Safari 3: force painting of the element, in order to have the correct display
this.tooltipElement.offsetHeight;
// Optimisation: save browser work if display is already 'none'
if (Spry.Widget.Utils.getStyleProperty(this.tooltipElement, 'display') != 'none')
this.tooltipElement.style.display = 'none';
if (typeof this.offsetX != 'numeric')
this.offsetX = parseInt(this.offsetX, 10);
if (isNaN(this.offsetX))
this.offsetX = 0;
if (typeof this.offsetY != 'numeric')
this.offsetY = parseInt(this.offsetY, 10);
if (isNaN(this.offsetY))
this.offsetY = 0;
this.tooltipElement.style.position = 'absolute';
this.tooltipElement.style.top = '0px';
this.tooltipElement.style.left = '0px';
Spry.Widget.Tooltip.onloadDidFire = false;
Spry.Widget.Tooltip.loadQueue = [];
Spry.Widget.Tooltip.addLoadListener = function(handler)
if (typeof window.addEventListener != 'undefined')
window.addEventListener('load', handler, false);
else if (typeof document.addEventListener != 'undefined')
document.addEventListener('load', handler, false);
else if (typeof window.attachEvent != 'undefined')
window.attachEvent('onload', handler);
Spry.Widget.Tooltip.processLoadQueue = function(handler)
Spry.Widget.Tooltip.onloadDidFire = true;
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen; i++)
if (!q[i].listenersAttached)
q[i].attachBehaviors();
Spry.Widget.Tooltip.addLoadListener(Spry.Widget.Tooltip.processLoadQueue);
Spry.Widget.Tooltip.prototype.addClassName = function(ele, className)
if (!ele || !className)
return;
if (ele.className.indexOf(className) == -1)
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.Tooltip.prototype.removeClassName = function(ele, className)
if (!ele || !className )
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.Tooltip.prototype.showTooltip = function()
if (!this.visibleTooltip)
this.tooltipElement.style.visibility = 'hidden';
this.tooltipElement.style.zIndex = '9999';
this.tooltipElement.style.display = 'block';
Spry.Widget.Utils.putElementAt(this.tooltipElement, this.pos, {x:this.offsetX, y:this.offsetY}, true);
if(Spry.is.ie && Spry.is.version == '6')
this.createIframeLayer(this.tooltipElement);
if (!this.visibleTooltip)
if (this.useEffect)
if (typeof this.showEffect == 'undefined')
this.showEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 0, to: 1});
this.showEffect.start();
else
this.tooltipElement.style.visibility = 'visible';
this.visibleTooltip = true;
Spry.Widget.Tooltip.prototype.hideTooltip = function(quick)
if (this.useEffect && !quick)
if (typeof this.hideEffect == 'undefined')
this.hideEffect = new Spry.Widget.Tooltip[this.useEffect](this.tooltipElement, {from: 1, to: 0});
this.hideEffect.start();
else
if (typeof this.showEffect != 'undefined')
this.showEffect.stop();
this.tooltipElement.style.display = 'none';
if(Spry.is.ie && Spry.is.version == '6')
this.removeIframeLayer(this.tooltipElement);
if (this.hoverClass && !this.hideTimer)
for (var i = 0; i < this.triggerElements.length; i++)
this.removeClassName(this.triggerElements[i], this.hoverClass);
this.visibleTooltip = false;
Spry.Widget.Tooltip.prototype.displayTooltip = function(show) {
if (this.tooltipElement)
if (this.hoverClass){
for (var i = 0; i < this.triggerElements.length; i++)
this.removeClassName(this.triggerElements[i], this.hoverClass);
if (show)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
var self = this;
this.showTimer = setTimeout(function(){self.showTooltip()}, this.showDelay);
else
if (this.showTimer)
clearInterval(this.showTimer);
delete(this.showTimer);
var self = this;
this.hideTimer = setTimeout(function(){self.hideTooltip();}, this.hideDelay);
this.refreshTimeout();
Spry.Widget.Tooltip.prototype.onMouseOverTrigger = function(e)
var target = '';
if (Spry.is.ie)
target = e.srcElement;
else
target = e.target;
var contains = Spry.Widget.Utils.contains;
for (var i = 0; i < this.triggerElements.length; i++)
if (contains(this.triggerElements[i], target))
target = this.triggerElements[i];
break;
if (i == this.triggerElements.length) return;
if (this.visibleTooltip && this.triggerHighlight && this.triggerHighlight == target)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
return;
var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
this.triggerHighlight = target;
Spry.Widget.Tooltip.closeAll();
this.displayTooltip(true);
Spry.Widget.Tooltip.prototype.onMouseMoveTrigger = function(e)
var pos = Spry.Widget.Utils.getAbsoluteMousePosition(e);
this.pos = {x: pos.x + this.offsetX, y: pos.y + this.offsetY};
if (this.visibleTooltip)
this.showTooltip();
Spry.Widget.Tooltip.prototype.onMouseOutTrigger = function(e)
var target = '';
if (Spry.is.ie)
target = e.toElement;
else
target = e.relatedTarget;
var contains = Spry.Widget.Utils.contains;
for (var i=0; i < this.triggerElements.length; i++)
if (contains(this.triggerElements[i], target))
return;
this.displayTooltip(false);
Spry.Widget.Tooltip.prototype.onMouseOutTooltip = function(e)
var target = '';
if (Spry.is.ie)
target = e.toElement;
else
target = e.relatedTarget;
var contains = Spry.Widget.Utils.contains;
if (contains(this.tooltipElement, target))
return;
this.displayTooltip(false);
Spry.Widget.Tooltip.prototype.onMouseOverTooltip = function(e)
if (this.hideTimer)
clearInterval(this.hideTimer);
delete(this.hideTimer);
if (this.hoverClass)
if (typeof this.triggerHighlight != 'undefined')
this.addClassName(this.triggerHighlight, this.hoverClass);
Spry.Widget.Tooltip.prototype.refreshTimeout = function()
if (Spry.Widget.Tooltip.refreshTimeout != null)
clearTimeout(Spry.Widget.Tooltip.refreshTimeout);
Spry.Widget.Tooltip.refreshTimeout = null;
Spry.Widget.Tooltip.refreshTimeout = setTimeout(Spry.Widget.Tooltip.refreshAll, 100);
Spry.Widget.Tooltip.prototype.destroy = function()
for (var k in this)
try{
if (typeof this.k == 'object' && typeof this.k.destroy == 'function') this.k.destroy();
delete this.k;
}catch(err){}
Spry.Widget.Tooltip.prototype.checkDestroyed = function()
// checks the parent node. If it exists, then the element is still in the DOM
if (!this.tooltipElement || this.tooltipElement.parentNode == null)
return true;
return false;
Spry.Widget.Tooltip.prototype.attachBehaviors = function()
var self = this;
var ev = Spry.Widget.Utils.addEventListener;
for (var i=0; i< this.triggerElements.length; i++)
ev(this.triggerElements[i], 'mouseover', function(e) {self.onMouseOverTrigger(e || event); return true;}, false);
ev(this.triggerElements[i], 'mouseout', function(e) {self.onMouseOutTrigger(e || event); return true;}, false);
if (this.followMouse)
ev(this.triggerElements[i], 'mousemove', function(e) {self.onMouseMoveTrigger(e || event); return true;}, false);
if (this.closeOnTooltipLeave)
ev(this.tooltipElement, 'mouseover', function(e){self.onMouseOverTooltip(e || event); return true;}, false);
ev(this.tooltipElement, 'mouseout', function(e){self.onMouseOutTooltip(e || event); return true;}, false);
this.listenersAttached = true;
// createIframeLayer for Tooltip
// creates an IFRAME underneath a tooltip element so that it will show above form controls and ActiveX
Spry.Widget.Tooltip.prototype.createIframeLayer = function(tooltip)
if (typeof this.iframeLayer == 'undefined')
var layer = document.createElement('iframe');
layer.tabIndex = '-1';
layer.src = 'javascript:"";';
layer.scrolling = 'no';
layer.frameBorder = '0';
layer.className = 'iframeTooltip';
tooltip.parentNode.appendChild(layer);
this.iframeLayer = layer;
this.iframeLayer.style.left = tooltip.offsetLeft + 'px';
this.iframeLayer.style.top = tooltip.offsetTop + 'px';
this.iframeLayer.style.width = tooltip.offsetWidth + 'px';
this.iframeLayer.style.height = tooltip.offsetHeight + 'px';
this.iframeLayer.style.display = 'block';
// removeIframeLayer for Tooltip Element
// removes an IFRAME underneath a tooltip to reveal any form controls and ActiveX
Spry.Widget.Tooltip.prototype.removeIframeLayer = function(tooltip)
if (this.iframeLayer)
this.iframeLayer.style.display = 'none';
Spry.Widget.Tooltip.prototype.showError = function(msg)
alert('Spry.Widget.Tooltip ERR: ' + msg);
Spry.Widget.Tooltip.refreshAll = function()
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen ; i++)
if (q[i].checkDestroyed())
// the trigger element is no longer in the dom, we should remove the current widget.
q[i].destroy();
q.splice(i, 1);
i--;
qlen = q.length;
Spry.Widget.Tooltip.closeAll = function()
var q = Spry.Widget.Tooltip.loadQueue;
var qlen = q.length;
for (var i = 0; i < qlen ; i++)
if (q[i].visibleTooltip)
q[i].hideTooltip(true);
if (q[i].showTimer)
clearTimeout(q[i].showTimer);
if (q[i].hideTimer)
clearTimeout(q[i].hideTimer);
Spry.Widget.Tooltip.Animator = function(element, opts)
this.timer = null;
this.fps = 60;
this.duration = 500;
this.startTime = 0;
this.transition = Spry.Widget.Tooltip.Animator.defaultTransition;
this.onComplete = null;
if (typeof element == 'undefined') return;
this.element = Spry.Widget.Utils.getElement(element);
Spry.Widget.Utils.setOptions(this, opts, true);
this.interval = this.duration / this.fps;
Spry.Widget.Tooltip.Animator.defaultTransition = function(time, begin, finish, duration) { time /= duration; return begin + ((2 - time) * time * finish); };
Spry.Widget.Tooltip.Animator.prototype.start = function()
var self = this;
this.startTime = (new Date).getTime();
this.beforeStart();
this.timer = setInterval(function() { self.stepAnimation(); }, this.interval);
Spry.Widget.Tooltip.Animator.prototype.stop = function()
if (this.timer)
clearTimeout(this.timer);
this.timer = null;
Spry.Widget.Tooltip.Animator.prototype.stepAnimation = function(){};
Spry.Widget.Tooltip.Animator.prototype.beforeStart = function(){};
Spry.Widget.Tooltip.Animator.prototype.destroy = function()
for (var k in this)
try
delete this.k;
}catch(err){}
Spry.Widget.Tooltip.Fade = function(element, opts)
Spry.Widget.Tooltip.Animator.call(this, element, opts);
if (Spry.is.ie)
this.origOpacity = this.element.style.filter;
else
this.origOpacity = this.element.style.opacity;
Spry.Widget.Tooltip.Fade.prototype = new Spry.Widget.Tooltip.Animator();
Spry.Widget.Tooltip.Fade.prototype.constructor = Spry.Widget.Tooltip.Fade;
Spry.Widget.Tooltip.Fade.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
this.beforeStop();
this.stop();
return;
var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
if (Spry.is.ie)
var filter = this.element.style.filter.replace(/alpha\s*$\s*opacity\s*=\s*[0-9\.]{1,3}$/, '');
this.element.style.filter = filter + 'alpha(opacity=' + parseInt(ht * 100, 10) + ')';
else
this.element.style.opacity = ht;
this.element.style.visibility = 'visible';
this.element.style.display = 'block';
Spry.Widget.Tooltip.Fade.prototype.beforeStop = function()
if (this.from > this.to)
this.element.style.display = 'none';
if (Spry.is.mozilla)
this.element.style.filter = this.origOpacity;
else
this.element.style.opacity = this.origOpacity;
Spry.Widget.Tooltip.Blind = function(element, opts)
this.from = 0;
this.to = 100;
Spry.Widget.Tooltip.Animator.call(this, element, opts);
this.element.style.visibility = 'hidden';
this.element.style.display = 'block';
this.origHeight = parseInt(Spry.Widget.Utils.getStyleProperty(this.element, 'height'),10);
if (isNaN(this.origHeight))
this.origHeight = this.element.offsetHeight;
if (this.to == 0)
this.from = this.origHeight;
else
this.to = this.origHeight;
Spry.Widget.Tooltip.Blind.prototype = new Spry.Widget.Tooltip.Animator();
Spry.Widget.Tooltip.Blind.prototype.constructor = Spry.Widget.Tooltip.Blind;
Spry.Widget.Tooltip.Blind.prototype.beforeStart = function()
this.origOverflow = Spry.Widget.Utils.getStyleProperty(this.element, 'overflow');
this.element.style.overflow = 'hidden';
Spry.Widget.Tooltip.Blind.prototype.stepAnimation = function()
var curTime = (new Date).getTime();
var elapsedTime = curTime - this.startTime;
var i, obj;
if (elapsedTime >= this.duration)
this.beforeStop();
this.stop();
return;
var ht = this.transition(elapsedTime, this.from, this.to - this.from, this.duration);
this.element.style.height = Math.floor(ht) + 'px';
this.element.style.visibility = 'visible';
this.element.style.display = 'block';
Spry.Widget.Tooltip.Blind.prototype.beforeStop = function()
this.element.style.overflow = this.origOverflow;
if (this.from > this.to)
this.element.style.display = 'none';
this.element.style.height = this.origHeight + 'px';
// Spry.Widget.Utils
if (!Spry.Widget.Utils) Spry.Widget.Utils = {};
Spry.Widget.Utils.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.Utils.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.Utils.getElementsByClassName = function(sel)
if (!sel.length > 0)
return null;
var selectors = sel.split(',');
var el = [];
for (var i =0; i < selectors.length; i++)
var cs = selectors[i];
var chunk = cs.split(' ');
var parents = [];
parents[0] = [];
parents[0][0] = document.body;
for (var j = 0; j < chunk.length; j++)
var tokens = Spry.Widget.Utils.getSelectorTokens(chunk[j]);
for (var k =0; k < parents[j].length; k++)
var childs = parents[j][k].getElementsByTagName('*');
parents[j+1] = [];
for (var l=0; l < childs.length; l++)
if (Spry.Widget.Utils.hasSelector(childs[l], tokens))
parents[j+1].push(childs[l]);
if (parents[j])
for (var k = 0; k < parents[j].length; k++)
el.push(parents[j][k]);
return el;
Spry.Widget.Utils.firstValid = function()
var ret = null;
var a = Spry.Widget.Utils.firstValid;
for(var i=0; i< a.arguments.length; i++)
if (typeof(a.arguments[i]) != 'undefined')
ret = a.arguments[i];
break;
return ret;
Spry.Widget.Utils.getSelectorTokens = function(str)
str = str.replace(/\./g, ' .');
str = str.replace(/\#/g, ' #');
str = str.replace(/^\s+|\s+$/g,"");
return str.split(' ');
Spry.Widget.Utils.hasSelector = function(el, tokens)
for (var i =0; i< tokens.length; i++)
switch (tokens[i].charAt(0))
case '.': if (!el.className || el.className.indexOf(tokens[i].substr(1)) == -1) return false; break;
case '#': if (!el.id || el.id != tokens[i].substr(1)) return false; break;
default: if (el.nodeName.toLowerCase != tokens[i]) return false; break;
return true;
Spry.Widget.Utils.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.Utils.getStyleProperty = function(element, prop)
var value;
var camelized = Spry.Widget.Utils.camelize(prop);
try
if (element.style)
value = element.style[camelized];
if (!value)
if (document.defaultView && document.defaultView.getComputedStyle)
var css = document.defaultView.getComputedStyle(element, null);
value = css ? css.getPropertyValue(prop) : null;
else if (element.currentStyle)
value = element.currentStyle[camelized];
catch (e) {}
return value == 'auto' ? null : value;
Spry.Widget.Utils.camelize = function(str)
if (str.indexOf('-') == -1)
return str;
var oStringList = str.split('-');
var isFirstEntry = true;
var camelizedString = '';
for(var i=0; i < oStringList.length; i++)
if(oStringList[i].length>0)
if(isFirstEntry)
camelizedString = oStringList[i];
isFirstEntry = false;
else
var s = oStringList[i];
camelizedString += s.charAt(0).toUpperCase() + s.substring(1);
return camelizedString;
* Spry.Widget.Utils.getPixels
* returns the value of a CSS property as Int, converting medium to 2
* @param {DOMElement} m - elements
* @param {String} s -
Spry.Widget.Utils.getPixels = function (m, s)
var v = Spry.Widget.Utils.getStyleProperty(m, s);
if (v == "medium") {
v = 2;
} else {
v = parseInt(v, 10);
v = isNaN(v)?0:v;
return v;
Spry.Widget.Utils.getAbsoluteMousePosition = function(ev)
var pos = {x:0, y:0};
if (ev.pageX)
pos.x = ev.pageX;
else if (ev.clientX)
pos.x = ev.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
if (isNaN(pos.x)) pos.x = 0;
if (ev.pageY)
pos.y = ev.pageY;
else if (ev.clientY)
pos.y = ev.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
if (isNaN(pos.y)) pos.y = 0;
return pos;
* Spry.Widget.Utils.getBorderBox
* returns a border box object (x,y,width,height) which perfectly covers the el element and its borders
* the x, y are absolute coordinates measured from from the window viewport
* use the box as the second parameter in Spry.Widget.Utils.setBorderBox
* @param {DOMElement or String} el -
* @param {DOMDocument,optional} doc -
Spry.Widget.Utils.getBorderBox = function (el, doc)
doc = doc || document;
if (typeof el == 'string')
el = doc.getElementById(el);
if (!el)
return false;
if (el.parentNode === null || Spry.Widget.Utils.getStyleProperty(el, 'display') == 'none')
//element must be visible to have a box
return false;
var ret = {x:0, y:0, width:0, height:0};
var parent = null;
var box;
if (el.getBoundingClientRect) { // IE
box = el.getBoundingClientRect();
var scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
var scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
ret.x = box.left + scrollLeft;
ret.y = box.top + scrollTop;
ret.width = box.right - box.left;
ret.height = box.bottom - box.top;
} else if (doc.getBoxObjectFor) { // gecko
box = doc.getBoxObjectFor(el);
ret.x = box.x;
ret.y = box.y;
ret.width = box.width;
ret.height = box.height;
var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
ret.x -= blw;
ret.y -= btw;
} else { // safari/opera
ret.x = el.offsetLeft;
ret.y = el.offsetTop;
ret.width = el.offsetWidth;
ret.height = el.offsetHeight;
parent = el.offsetParent;
if (parent != el)
while (parent)
ret.x += parent.offsetLeft;
ret.y += parent.offsetTop;
parent = parent.offsetParent;
var blw = Spry.Widget.Utils.getPixels(el, "border-left-width");
var btw = Spry.Widget.Utils.getPixels(el, "border-top-width");
ret.x -= blw;
ret.y -= btw;
// opera & (safari absolute) incorrectly account for body offsetTop
var ua = navigator.userAgent.toLowerCase();
if (Spry.is.opera || Spry.is.safari && Spry.Widget.Utils.getStyleProperty(el, 'position') == 'absolute')
ret.y -= doc.body.offsetTop;
if (el.parentNode)
parent = el.parentNode;
else
parent = null;
while (parent && parent.tagName != 'BODY' && parent.tagName != 'HTML')
ret.x -= (isNaN(parent.scrollLeft) ? 0 : parent.scrollLeft);
ret.y -= (isNaN(parent.scrollTop) ? 0 : parent.scrollTop);
if (parent.parentNode)
parent = parent.parentNode;
else
parent = null;
return ret;
* Spry.Widget.Utils.setBorderBox
* puts the element el to the location specified by box
* @param {DOMElement} el - the element to be placed
* @param {Object} box - hash containing the x and y coordinates where to put el
Spry.Widget.Utils.setBorderBox = function (el, box) {
var pos = Spry.Widget.Utils.getBorderBox(el, el.ownerDocument);
if (pos === false)
return false;
var delta = {
x:Spry.Widget.Utils.getPixels(el, 'left'),
y:Spry.Widget.Utils.getPixels(el, 'top')
var new_pos = {x:0, y:0, w:0, h:0};
if (typeof box.x == 'number') {
new_pos.x = box.x - pos.x + delta.x;
if (typeof box.y == 'number') {
new_pos.y = box.y - pos.y + delta.y;
if (typeof box.x == 'number') {
el.style.left = new_pos.x + 'px';
if (typeof box.y == 'number') {
el.style.top = new_pos.y + 'px';
return true;
Spry.Widget.Utils.putElementAt = function (source, target, offset, biv)
biv = Spry.Widget.Utils.firstValid(biv, true);
var source_box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
Spry.Widget.Utils.setBorderBox(source, target);
if (biv)
Spry.Widget.Utils.bringIntoView(source);
return true;
* Spry.Widget.Utils.bringIntoView
* set the position of the source element so it is completely visible in the window
* @param {DOMElemenet} source - the element to be
Spry.Widget.Utils.bringIntoView = function (source) {
var box = Spry.Widget.Utils.getBorderBox(source, source.ownerDocument);
if (box === false) {
return false;
var current = {
x:Spry.Widget.Utils.getPixels(source, 'left'),
y:Spry.Widget.Utils.getPixels(source, 'top')
var delta = {x:0, y:0};
var offset_fix = {x:0, y:0};
var strictm = source.ownerDocument.compatMode == "CSS1Compat";
var doc = (Spry.is.ie && strictm || Spry.is.mozilla)?source.ownerDocument.documentElement:source.ownerDocument.body;
offset_fix.x = Spry.Widget.Utils.getPixels(doc, 'border-left-width');
offset_fix.y = Spry.Widget.Utils.getPixels(doc, 'border-top-width');
var st = doc.scrollTop;
var ch = self.innerHeight ? self.innerHeight : doc.clientHeight;
var t = box.y + (Spry.is.ie?-offset_fix.y:offset_fix.y);
var b = box.y + box.height + (Spry.is.ie?-offset_fix.y:offset_fix.y);
if ( b - st > ch) {
delta.y = ch - (b - st);
if (t + delta.y < st) {
delta.y = st-t;
} else if (t < st) {
delta.y = st - t;
if (delta.y != 0) {
source.style.top = (current.y + delta.y) + 'px';
var sl = doc.scrollLeft;
var cw = doc.clientWidth;
var l = box.x + (Spry.is.ie?-offset_fix.x:offset_fix.x);
var r = box.x + box.width + (Spry.is.ie?-offset_fix.x:offset_fix.x);
if ( r - sl > cw) {
delta.x = cw - (r - sl);
if (l + delta.x < sl) {
delta.x = sl-l;
} else if (l < sl) {
delta.x = sl - l;
if (delta.x != 0) {
source.style.left = (current.x + delta.x) + 'px';
Spry.Widget.Utils.contains = function (who, what) {
if (typeof who.contains == 'object') {
return what && who && (who == what || who.contains(what));
} else {
var el = what;
while(el) {
try{
if (el == who) {
return true;
el = el.parentNode;
}catch(a){return false;}
return false;
})(); // EndSpryComponent
@charset "UTF-8";
/* SpryTooltip.css - version 0.2 - Spry 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* HACK FOR IE: to make sure the tooltips show above form controls, we underlay each tooltip with an iframe */
.iframeTooltip
position: absolute;
z-index: 1010;
filter:alpha(opacity:0.1);
.tooltipContent
font-size: 11px;
font-style: italic;
color: #332c40;
width: 96px;
height: 51px;
background: url(../_images/recipe/bubble2.png) no-repeat;
font-family: "Comic Sans MS", cursive;
margin: 0px;
left: -200px;
top: -200px;
padding-top: 5px;
vertical-align: middle;
position: fixed;

I couldn't get this script to work with my code:
<a id="greensource" href="a"><img src="images/greensource.png" alt="Greensource Initiative" width="193" height="71" border="0" usemap="#Map7" id="sprytrigger6" title="Greensource Initiative" />
<map name="Map7" id="Map7">
<area shape="rect" coords="-22,-15,197,79" href="#" />
</map>
</a>
<div class="tooltipContent" id="green">
<div class="secondback">
<div style="padding: 15px;">
<h1>GREENSOURCE</h1>
<h2>INITIATIVE™</h2>
<p>Manufactred within Greensource Initiative™ guildelines for use of recycled materials, renewable energy and non-hazardous packaging materials. RoHS Compliant.</p>
<p class="morebutton"><a href="#">LEARN MORE</a></p>
</div>
</div>
</div>
<script type="text/javascript">

</script>
Maybe someone can point out my problem?
CSS:
.tooltipContent
    margin: 0;
    padding: 0;
    background: #FFF url(../images/bottom-gradient.png) repeat-x bottom left;
    font-family: "Myriad Pro", Tahoma, Geneva, sans-serif;
    text-align: left;
    box-shadow: 2px 2px 4px #b6b5b6;
    -webkit-box-shadow: 2px 2px 4px #b6b5b6;
    -moz-box-shadow: 2px 2px 4px #b6b5b6;
    position: fixed;
#green {
    position: absolute;
    border: none;
    top: 200px;
    left: 200px;

ICal event detail in tool tip?

Similar Messages

Maybe you are looking for