ARRGH!!!! HELP with tooltip

[TheLionClaws]

I do not understand how to use this qtip plugin at all. All I see is how to create the class. How do you apply a tip to a control in asp.net. Example: I want to apply a tooltip to an img tag, or a button tag etc.. I am a .Net developer, but I am so confused on how to use this thing. Can someone list or attach a working example using the tooltip with the above tags, or inside an asp.net web form?

thanks

[TheLionClaws]

COME ON, SOMEONE HAS TO HAVE AN EXAMPLE OF USING THE TOOLTIP IN A HTML OR ASP.NET WEB FORM.
I NEED TO SEE A FUNCTIONING VERSION, NOT THESE SNIPPETS THAT EVERYONE KEEPS SHOWING.

THANKS

[Craig]

Whoa whoa no need for caps there LionClaws, your confused we understand .

Have you looked at the demo pages? They have clear examples of qTip in use which should be more than helpful to you.

[abdylas]

Hi Craig,

Thanks for developing such a great tooltip. However, I had trouble making it work, tried it every way with no luck. I know it's pretty easy for programmers or developers such as yourselves to figure out the bigger picture from just talking about "elements","loops" and "if else..." but for somebody who has not used jQuery at all and who has only HTML knowledge it's pretty difficult to get it work. For this reason, I think it would be wise to include one HTML page where the demos are already implemented. So that the user can just change that page to his/her needs and move on.

Will it be possible for me to download one HTML page with all the implementations (i.e for link, text, image preview, dynamic content...etc)?

Thanks.

[Craig]

Sorry for the delay in posting abdylas, accidentally marked the item as read! If you still need assistance with this drop me a line via email and I'll send over the actual HTML code of several simple examples for you as a stop gap until the new site release is out.

[markjj]

TheLionClaws Wrote:COME ON, SOMEONE HAS TO HAVE AN EXAMPLE OF USING THE TOOLTIP IN A HTML OR ASP.NET WEB FORM.
I NEED TO SEE A FUNCTIONING VERSION, NOT THESE SNIPPETS THAT EVERYONE KEEPS SHOWING.

THANKS

This tool seemed pretty easy to get running. So here's what we did...

1) Create a JS file with the following and include in your HTML. (or put at the top of your HTMl in <script> tags)
$(function() {
$('img[alt!=""],a[title!=""]').qtip({ style: { name: 'cream', tip: true, border: {
width: 3,
radius: 5
} },position: { adjust: { screen: true , mouse: true} }, show: {effect: {type:'slide',length:'10'} }, hide: {effect: {type:'fade',length:'1000'} } });
});

2) In your HTML file (in the head section) include the qtip plug in and the Jquery library. Like so:
<script type="text/javascript" src="/jquerypath/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/jquerypath/js/jquery.qtip-1.0.0-rc3.min.js">

make sure you point to your JS files.


That's it!!!

The above example will use what ever you put in the img ALT tag OR the <a> title tag (non blank) as the qtip tool tip. It displays it using a preset style ('cream'). If you want change this then look at the style section on Craig's web site.

If it's still not working check that you have the latest jquery library and that you're pointing to the correct place in your header. PS. jquery doesn't always throw errors if it can't find the library or the qtip library so manually test by typing the full URL in your brower URL bar (eg. http://www.mywebsite.com/jquerypath/js/j...3.2.min.js etc. - if you get a file not found then this would explain it not working.)

You can see this working on www.tourabout.com - just mouse over one of the images on the home page.

[sakura]

TheLionClaws Wrote:COME ON, SOMEONE HAS TO HAVE AN EXAMPLE OF USING THE TOOLTIP IN A HTML OR ASP.NET WEB FORM.
I NEED TO SEE A FUNCTIONING VERSION, NOT THESE SNIPPETS THAT EVERYONE KEEPS SHOWING.

THANKS

I can understand his frustration, the demo and documentation are clear but not really (even it's hard to figure out from the page source code). From beginners pov it is quite intimidating, because the beginners need to start it from somewhere with very clear example.

JS Code

// javascript part
....

JS Code

//html part
<body>
...
</body>

The demos (http://craigsworks.com/projects/qtip/demos/) is just talking about the javascript part, where there's no clue how to hook it to the html. There is a HTML documentation ( http://craigsworks.com/projects/qtip/docs/#structure ) but it's not clear either.
I'm sorry I don't mean to criticize you , it is the best tooltips I've ever seen but I think we need a straightforward example to start with

Just my 2 cents, and thanks for the hard work Craig

[PeteJ]

I've got to agree with sakura on this. I am a professional programmer, but I have only a basic knowledge of HTML and no knowledge of javascript. I have just spent a hour trying to work out how to use qtip with no success. All that's needed is a very, very basic complete html page that shows how to get the simplest tip with the minimum code. With this to build on, the documentation would be meaningful.

Pete

[Te3d]

I have to agree as well...I'm a web developer (mostly PHP OOP) not unaccustomed to code and the demos weren't as helpful as they appear to be. They are slick looking and show you what the code can do, but a simple, bare bones HTML page with just the necessary JS, CSS and HTML components would be a great starting point to review and build on. This plugin is most helpful for those not used to working with JQuery, but only if they can get them working. Viewing the source code of the demo is not much help because of all the extra elements included.

Once again, this is a great tool and a lot of effort has gone into creating this well designed site, which I appreciate. A bare bones addition would seem simple to add compared to all the rest and would help many.

My 2 cents...

Ted

[Craig]

Thanks for the input guys, and you're right that the demos really need some work in order to be more useful. In fact, the new site redesign that's coming along with the 1.0 release will feature a brand new demos section which allows you to view the code associated with the demo very easily. So stay tuned for an early Christmas present?

[mikreeb]

Is there any way you can post or send a copy of the html and css files from the demo before you finish the 1.0 release and site redesign? I do most of my coding in PHP and Coldfusion, and I'm trying to figure out how to display query results from a database in the tooltip. The main problem is that I am having trouble just getting a basic static tooltip working - if I can get that working, then I can focus on displaying query results in the tip.

[double3]

I finally find a really slick option for tooltips ... and I can't figure out why I can't get it to work. It's driving me crazy. I'm with the others above ... what you've created is killer ... but a super basic tutorial is needed for newbies like myself. Can someone please help me with all of the basics to get this thing working?

Thanks!

[Craig]

Sorry to hear some of you are still having problems getting qTip to work first time. The documentation is in need of a good overhaul, which it will get in due course when the 1.0 release is ready to be shipped around Christmas time/early next year. As always, if you need any specific information or just need some general help don't hesitate to start a new thread or email me and I'll see if I can help out when I get a spare moment.

[Swamp Dawg]

craig Wrote:Whoa whoa no need for caps there LionClaws, your confused we understand .

Have you looked at the demo pages? They have clear examples of qTip in use which should be more than helpful to you.

This is exactly the info I was looking for. Thank you Craig...and Lionpaws......fer yellin. LOL

Swamp Dawg