Solved

jquery fundamentals with tooltips

Posted on 2010-11-09
5
708 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
0
Comment
Question by:cyborama
  • 3
5 Comments
 
LVL 17

Expert Comment

by:jrm213jrm213
ID: 34096262
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.

0
 

Author Comment

by:cyborama
ID: 34097282
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
0
 
LVL 8

Accepted Solution

by:
paololabe earned 500 total points
ID: 34118608
the best way to include js library in a dnn portal is to use a specifc module or adding them by code, this beacuse the head where you are adding script is not really the head of html document.
I used a lot of jquery controls in dnn portals i developed using always code (vb or c#) to add libraries and execute scripts, this grant also a cross browser compatibility.
for example if you want to add these libraries on the skin.ascx, open this file and add the code similar to my sample.
You can see i first add libraries then add a script block to call funtion, you can also use RegisterStartupScript.

Paolo.

<script runat="server">
    Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        
        DotNetNuke.Framework.jQuery.RequestRegistration()
        Page.ClientScript.RegisterClientScriptInclude("jQueryTools", ResolveClientUrl("js/jQueryTools.1.2.5.js"))
        Page.ClientScript.RegisterClientScriptInclude("mousewheels", ResolveClientUrl("js/jquery.mousewheel.js"))
        Page.ClientScript.RegisterClientScriptInclude("carousel", ResolveClientUrl("js/cloud-carousel.1.0.4.js"))
        Page.ClientScript.RegisterClientScriptInclude("swfObject", ResolveClientUrl("js/swfobject.js"))
        
Dim jQueryStart As String = String.Format("jQuery(document).ready(function(){{{doSomething();}}});" )
                           
        Page.ClientScript.RegisterClientScriptBlock(Me.GetType(), "loadAnim", "var flashvars={};swfobject.embedSWF('anim');" & & jQueryStart, True)
        
    End Sub
              
</script>

Open in new window

0
 

Author Comment

by:cyborama
ID: 34142119
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
0
 

Author Closing Comment

by:cyborama
ID: 36492643
thanks for your help with this question
0

Featured Post

Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

9 Experts available now in Live!

Get 1:1 Help Now