Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 726
  • Last Modified:

jquery fundamentals with tooltips

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
cyborama
Asked:
cyborama
  • 3
1 Solution
 
jrm213jrm213Commented:
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
 
cyboramaAuthor 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
0
 
paololabeCommented:
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
 
cyboramaAuthor 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
0
 
cyboramaAuthor Commented:
thanks for your help with this question
0

Featured Post

[Webinar On Demand] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now