jquery.tooltip & jquery.cluetip do not work

411 views
Skip to first unread message

Martin Weissenboeck

unread,
Jan 5, 2011, 10:44:19 AM1/5/11
to web...@googlegroups.com
Hi,
I want to use tooltips like 
http://jquery.bassistance.de/tooltip/demo/ or 
http://plugins.learningjquery.com/cluetip/ 
on my website "test10ui"

One jquery-problem is solved, an includefile from ajax.googleapis.com works.
But it is not possible to get nice tooltip - I can only see the standard HTML-tolltips.

I have added these lines to web2py_ajay.html 
Now some nice jquery ui modules work very fine, e.g. sortable

<script>
  var res='1,2,3';
  jQuery(document).ready(function() {
    
    jQuery('#sortable').sortable({
      stop: function(event,ui){
        res=jQuery('#sortable').sortable('toArray');
        },
      opacity: '0.6'});
    
  });
  </script>
<div>
<ul id="sortable">
<li id='1'>Text 1</li>
<li id='2'>Text 2</li>
<li id='3'>Text 3</li>
</ul>
</div>
<div onclick="alert('New order: '+res)">Ready</div>

Hint from apple <sim...@gmail.com> - thank you!

But I want to know, why these lines do not work:

response.files.insert(3,URL('static','css/smoothness/jquery-ui-1.8.7.custom.css'))
response.files.insert(4,URL('static','js/jquery-ui-1.8.7.custom.min.js'))

From Branko Vukelić<stu...@brankovukelic.com>
And then, after the web2py_ajax.html include line in layout.html:
   <script>
       $ = jQuery;
   </script>

And then load the jquery-ui:

   <script src="{{=URL('static','js/jquery-ui-1.8.7.custom.min.js')}}"></script>


Sorry, did not work - I have tried several combinations.

I think, tooltip and cluetip do not work, because someting went wrong when I tried to include the  files jquery-ui-1.8.7.custom.min.js and so on. Or shall I use an uncompressed file (withot the "min")?

There is a part of the source code of my website - it looks correct?

<script src="/test10ui/static/js/jquery.js" type="text/javascript"></script>
<link href="/test10ui/static/css/calendar.css" rel="stylesheet" type="text/css" />
<script src="/test10ui/static/js/calendar.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/jquery-ui.min.js" type="text/javascript"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/cupertino/jquery-ui.css" rel="stylesheet" type="text/css" />
<link href="/test10ui/static/css/jquery.cluetip.css" rel="stylesheet" type="text/css" />
<script src="/test10ui/static/js/jquery.cluetip.js" type="text/javascript"></script>
<script src="/test10ui/static/js/jquery.tooltip.min.js" type="text/javascript"></script>
<link href="/test10ui/static/css/base.css" rel="stylesheet" type="text/css" />
<link href="/test10ui/static/css/superfish.css" rel="stylesheet" type="text/css" />
<script src="/test10ui/static/js/superfish.js" type="text/javascript"></script>

Of course all of these files are part of the static section test10ui.
I have tried Chrome, Safari, Opera - same results.
IE did not show the website....

Regards, Martin

Brian M

unread,
Jan 5, 2011, 4:10:40 PM1/5/11
to web...@googlegroups.com
What does the FireBug extension for FireFox tell you?

Martin Weissenboeck

unread,
Jan 6, 2011, 3:40:12 AM1/6/11
to web...@googlegroups.com
I have found the answer:
I have loaded "jquery.tooltip.min.js" as "js/jquery.tooltip.min.js", but it should be called "js/jquery.tooltip.js"  

I am shure that there is a description on the jquery-website, but I did not find it. 
It would be nice to have small example for using "jquery ui" and similar plugins in the web2py manual, e.g. at the end of chapter 10.2.

------------------------------------------------------------------------------------------------
A short example for jQuery Tooltips

Download the actual version from http://bassistance.de/jquery-plugins/jquery-plugin-tooltip/, unpack it and copy the following files to the "Static files", using the upload file button:
  • jquery-tooltip/jquery.tooltip.css  -> css/jquery.tooltip.css
  • jquery-tooltip/jquery.tooltip.pack.js  -> js/jquery.tooltip.js
Don't forget to rename it to "jquery.tooltip.js"!

Add the following lines in web2py_ajax.html
  • response.files.insert(3,URL('static','css/jquery.tooltip.css'))
  • response.files.insert(4,URL('static','js/jquery.tooltip.js'))
Use it in default/index.html:


<script>
jQuery(function() {
jQuery('#tip ').tooltip();
});
</script>

<div id='tip' title='This is a tip'>Tip</div>
------------------------------------------------------------------------------------------------

Regards, Martin


2011/1/5 Brian M <bmer...@gmail.com>
Reply all
Reply to author
Forward
0 new messages