troubleshooting Question

jquery fundamentals with tooltips

Avatar of cyborama
cyboramaFlag for United States of America asked on
JavaScript.NET ProgrammingAJAX
5 Comments1 Solution757 ViewsLast Modified:
Hello There,

I have been trying to implement the jquery tooltip found on the following website:

http://flowplayer.org/tools/demos/tooltip/any-html.html

I have downloaded the different pieces and thought I have put them in the right places but I guess I am just asking this question to find out if I am missing something since I am fairly new to this framework.

I am currently using Dotnetnuke 5.5.1 as my cms and I am trying to implement this jquery either within a html module or in the head of the module or the head of the dynamic default.aspx web page.

All this DNN lingo may be a little greek to you but the point is I need some pointers on if I am doing something wrong in setting up this jquery to function.

Here is what I have done.  in the header of the page I have put two scripts as follows:

<script language="javascript" type="text/javascript" src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
    <script language="javascript" type="text/javascript" src="/jseffects/tooltip.slide.min.js"></script>

The main jquery framework is also included but by CMS does this automatically by refrencing google's CDN which contains the latest copy of jquery.  Anyway after this I have included the following script in the body of the page

<script language="javascript" type="text/javascript" src="/jseffects/stamfordtooltip.js"></script>

What is inside this file is the following:
--------------------------------------------------------------------------------------------------
$(function()

            {


                 $("img.applytooltip").tooltip({

effect: 'slide',
bounce: 'true',
direction: 'right',
slideOffset: 25,
slideFade: !$broswer.msie
});


            });
---------------------------------------------------------------------------------------------------------
Now the website that had this tooltip tutorial said this about creating a tooltip class.

-------------------------------------------------------------------------------------------------------
By default the Tooltip generates the tooltip element automatically and assigns the CSS class name tooltip to it. It should be initially hidden by the CSS by setting display: none. We have no specific styling for the trigger elements.

/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
      display:none;
      background:transparent url(/tools/img/tooltip/black_arrow.png);
      font-size:12px;
      height:70px;
      width:160px;
      padding:25px;
      color:#fff;      
}
---------------------------------------------------------------------------------------------------------------

my tooltip class for now is layed out as follows:

------------------------------------------------------------------------------------------------------
.tooltip

{
    display:none;
    width: 250px;
    height:250px;
    color:#fff;
    font-size:16pt;
    font-style:italic;
   
}
--------------------------------------------------------------------------------------------------------------
Now here is another thing and I don't know if it has to do with the way I may have set up this slide script for the tooltip or just how it interrelates with my CMS but I have noticed that when I use the following code inside my DNN framework:
---------------------------------------------------------------------------------------------------------
$(function()

            {


                 $("img.applytooltip").tooltip({

effect: 'slide',
bounce: 'true',
direction: 'right',
slideOffset: 25,
slideFade: !$broswer.msie
});


            });
----------------------------------------------------------------------------------------------------------------
Some other modules that use jquery don't seem to operate correctly but on the other hand if I either eliminate the outer function that tells the tooltip not to run until the document is ready or scriptable or if I don't use configuration objects as an orgument within the tooltip constructor than everything seems to be in harmony but if I do either one of those things it breaks other modules.

I know you guys are probably not DNN savvy but I was just wondering if there just might be something in the way I am trying to implement this tooltip that would cause the tooltip not to show up properly.

At the point I have it now I would expect the data to show up when I hover over a picture in which the tag and class img class="applytooltip" is present.  For example I tried this snippet of code within my html module.
--------------------------------------------------------------------------------------------------------------------
<img alt="" class="applytooltip" style="width: 165px; height: 104px;" src="/Portals/0/Other%20Images/smallbible.png" />
<div class="tooltip">Testing Tooltip</div>
-------------------------------------------------------------------------------------------------------
The behavior I anticipated was when the image smallbible is rolled over with a mouse the words Testing Tooltip would suddenly appear somewhere on the page with no color background as such just white colored words but I saw nothing.

It is almost as if the tooltip constructor was not flipping the switch on the display property of the class tooltip so that when I hovered over the picture what was display:none would be turned on until taking the mouse off the picture which is suppose to be the trigger element.

I am not sure if jquery is seeing img class="applytooltip" as the trigger or perhaps doesn't recognize the div container as the actually tooltip as I expected it would.

So even if you don't have any DNN background or background on this particular tooltip I am trying to implement perhaps you have some background on jquery and jquery tools in general to help me troubleshoot what might not be set up properly here if anything.

Thanks again,

Bo
ASKER CERTIFIED SOLUTION
paololabe

Our community of experts have been thoroughly vetted for their expertise and industry experience.

Join our community to see this answer!
Unlock 1 Answer and 5 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 5 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros