asked on 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.sl
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/stamfordto
What is inside this file is the following:
--------------------------
$(function()
{
$("img.applytooltip").tool
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/bla
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").tool
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%20Im
<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
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.sl
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/stamfordto
What is inside this file is the following:
--------------------------
$(function()
{
$("img.applytooltip").tool
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/bla
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").tool
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%20Im
<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
JavaScript.NET ProgrammingAJAX
Last Comment
cyborama
ASKER
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
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
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
ASKER
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
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
ASKER
thanks for your help with this question
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.