We help IT Professionals succeed at work.

jquery fundamentals with tooltips

753 Views
Last Modified: 2012-05-10
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
Comment
Watch Question

Hi,

I don't know if it is an option or not but you could try this jquery plugin instead: http://craigsworks.com/projects/qtip/

I had tried to implement the flowplayer tooltip script before and I could not get it to work properly either. I have successfully used the qtip plugin. It is fairly similar but am not sure if it meets all your needs.

Author

Commented:
hmmm took a look at this and it seems like the content, css, etc... is inside the jquery params opposed to the jquery simply creating the effect, the css the style and the html the content.

You don't know of any others or do you.  

That's good to know I'm not the only one having problems with the flowplayer version.  It seems so rich and seems to compartmentalize functionality from presentation from data fairly decently but if it doesn't implement well what good is it, right.  Anyway thanks for the tip.

If anyone has had success with this flowplayer deal could you let me know or if you know of another tooltip that seems to do a good job at seperating content from function from presentation as I need to allow my client to simply work with the data or content of the tooltip without the chance of messing with where it ends up showing up or how it looks at least at this point.
In other words I'd prefer them at this point not be able to play with the configurations of the actual tooltip just the content as they are not as program saavy.

Thanks,

Bo
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
Hello Paololabe,

Thanks for the tip.  It's good to know there are other dotnetnukers out there.  I will try this code snippet you gave and see if I can't work with this to implement this jquery tools from flowplayer.  Anyway thanks again,

Bo

Author

Commented:
thanks for your help with this question

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.