Javascript Tooltips - DarkTip

3 Night Elf Druid
0
Minor Bugfix Update

Why, why, why? Becaue of IE! Cry, cry, cry

IE failed on rendering character tooltips because the property "class" is reserved and cannot be accessed using the point notation. Array notation works, now... :-P

New bundled release found here: http://code.google.com/p/wow-data-tooltip/downloads/detail?name=wdt-beta-r65.zip
Reply Quote
3 Night Elf Druid
0
Concerning Nissel's bug report:

If you set the js and css files in the config to be absolute (http://www.example.com/js/wdt/jquery.qtip.min.js) instead of relative (/js/wdt/jquery.qtip.min.js) it takes a long time to load the tooltip, but only on Chrome.


If found a bug report for yepnopejs and bugfix for this: https://github.com/manuelschneider/yepnope.js/commit/dd2b6c93d26f1d69e32aa17baa28a5d45e484284

This will be in for the next build. :-)
Edited by Rhileu on 8/24/2011 2:43 AM PDT
Reply Quote
3 Night Elf Druid
0
Next build is up... :-P

Revision 66 fixes the bug that Chrome will stall cross-site css inclusions till timeout.

http://code.google.com/p/wow-data-tooltip/downloads/detail?name=wdt-beta-r66.zip

================================================

And another

> Fixed IE Background Color Bug (I love that Browser! xD)
> Added Copyright to Images included by Data-URLs
> Added Quest-Tooltips (explicit only: "quest:us.25(en)")

Download: http://code.google.com/p/wow-data-tooltip/downloads/detail?name=wdt-beta-r67.zip


Have fun! :-)
Edited by Rhileu on 8/24/2011 5:02 AM PDT
Reply Quote
1 Gnome Mage
0
I upgradet the version of Rhils wdt to my live projects

Here is some example for the tooltips in English with extern implementations
http://failflotte.com/indexen.html

or here in in a live portal
http://sturmwächter.de/

Thanks for the performance Updates.
Edited by Deex on 8/24/2011 6:10 AM PDT
Reply Quote
85 Goblin Mage
11120
08/24/2011 12:47 AMPosted by Rhileu
Why, why, why? Becaue of IE! Cry, cry, cry

LOL.. Every time I have to fix (more like tweak) code so it works in IE, a little part of my web programming ambition dies.
Reply Quote
2 Blood Elf Rogue
0
If it is IE 6.0 I would just ignore it, if someone still use it own fault.
Reply Quote
85 Night Elf Druid
0
I upgradet the version of Rhils wdt to my live projects

Here is some example for the tooltips in English with extern implementations
http://failflotte.com/indexen.html

or here in in a live portal
http://sturmwächter.de/

Thanks for the performance Updates.


I'm not sure I understand, neither of your sites show any tooltips at all. In neither Firefox or Chrome.
Reply Quote
90 Worgen Druid
11085
Very Nice work!!
Reply Quote
85 Blood Elf Mage
2715
Thanks for the updates, the chrome bug is fixed on my end as well.

08/24/2011 09:31 AMPosted by Kieble
I'm not sure I understand, neither of your sites show any tooltips at all. In neither Firefox or Chrome.


Works for me in Opera/Win7.
Reply Quote
3 Night Elf Druid
0
08/24/2011 09:31 AMPosted by Kieble
I'm not sure I understand, neither of your sites show any tooltips at all. In neither Firefox or Chrome.


Deex' implementations of my tooltips may not be the ideal demonstrations since they are loaded by two or more layers or asynchronous resource loading scripts. These scripts and additional libs that are included may lead to stalls in some constellations.

If you just want to see the tooltips in action, I strongly suggest to visit the demo pages hosted on my domain:

1. http://dev.dsitc.de/demos/wow-data-tooltip/
2. http://dev.dsitc.de/demos/wow-data-tooltip/test_clean.php
Edited by Rhileu on 8/24/2011 10:38 AM PDT
Reply Quote
82 Human Death Knight
2425
Great work! These tooltips work brilliantly!

I saw on your page that you're using a lightweight templating engine, and I can see in your source where you are defining your template strings. However, I don't see a way to use my own template if I want to... is that something you intend to include? I like the way they look, but I'd like to make them look like the in-game tips. Granted, I can probably accomplish everything I need with CSS changes, but I have a bad habit of doing things the hard way. Hah!

For what it's worth I tinkered with the code and implemented it myself, but I'd rather not muck with your code at all... no need to recreate the wheel, right? :)
Reply Quote
3 Night Elf Druid
0
Great work! These tooltips work brilliantly!

I saw on your page that you're using a lightweight templating engine, and I can see in your source where you are defining your template strings. However, I don't see a way to use my own template if I want to... is that something you intend to include? I like the way they look, but I'd like to make them look like the in-game tips. Granted, I can probably accomplish everything I need with CSS changes, but I have a bad habit of doing things the hard way. Hah!

For what it's worth I tinkered with the code and implemented it myself, but I'd rather not muck with your code at all... no need to recreate the wheel, right? :)


/bow

Thanks a lot :-)

Yes, I do plan to add injection points for templates, localization and even data sources in the config object.

08/24/2011 09:19 AMPosted by Dorwido
If it is IE 6.0 I would just ignore it, if someone still use it own fault.


Sadly it was IE 8... *grumbles*

@ All:

If you are using the lib, I'd love to get heads-up so that I can have a look, get new ideas and maybe post a list of sites that are using my lib on my homepage one day. :-)

Currently I'm rewrite large parts of it to unify some methods and shrink the size of the lib. That, and trying to catch up documenting all that stuff... *gg*
Edited by Rhileu on 8/25/2011 11:11 PM PDT
Reply Quote
2 Blood Elf Rogue
0
I think it would be a good idea to put the languages into extra files to shrink the size and for example my site is english only atm, so I don't need any other languages currently and would leave the other out.

And afaik enGB/enUS and esMX/esES don't have differences.

Reply Quote
1 Gnome Mage
0
I'm not sure I understand, neither of your sites show any tooltips at all. In neither Firefox or Chrome.


Hmm can someone other confirm that bug? That there are no Tooltips FF and chrome?
I testet it with IEX8, IEX7, Firefox, 360Browser, PSP Browser, Safari and worked always fine.
http://img.xrmb2.net/images/120370.png
Edited by Deex on 8/26/2011 6:59 AM PDT
Reply Quote
3 Night Elf Druid
0
Soooooo, big Update!! :-D

Demo: http://dev.dsitc.de/demos/wow-data-tooltip/
Download: http://code.google.com/p/wow-data-tooltip/downloads/detail?name=wdt-beta-r73.zip


What's new:

- Arena Team Tooltip! Yep, all in there. Default display is complete season stats, and pressing Shift will bring up the current week.

- Quest Tooltips! Since there are no know battle.net urls that point to quest pages, this is only available as explicit tooltip.

- Realm Tooltips now feature the battlegroup. ;-)

- A few fixes and size reductions, the lib is now smaller and should load a bit faster. I will include minified versions in the next release, too. I promise... ^^


Have fun! :-)
Edited by Rhileu on 8/26/2011 7:10 AM PDT
Reply Quote
82 Human Death Knight
2425
Great changes! I created a custom.css file that you can add after your code that changes the tooltips to look almost identical to the battle.net tooltips (border, bgcolor/transparency, icon on the outside, etc).

I pasted it up here: http://pastebin.com/wVzZ8RKP

Take a look and let me know what you think... it still needs some IE tweaking to make it look good in IE (ugh), but all other browsers are fine. The only other problem is that a link on the left side of the monitor will cut off the tooltip icon in some cases... this is because I'm moving the icon outside the bounds of its container...

Anyway, it still needs some work, but might be a good starting point for others to use as well. :)
Reply Quote
3 Night Elf Druid
0
Thanks for the CSS, I will be adding additional configuration options in the next build that will enable implementors to add custom css and templates.

About the icon moving off-screen: Yes, if you position it that way, that's a problem. You may however do this (Warning: character only ^^):


.ui-tooltip-cluetip {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.wdt-tooltip .ui-tooltip-content {
background-color: transparent;
}

.tooltip-character .data {
padding: 6px;
margin-left: 96px;
background-color: rgba(0, 0, 0, 0.8);
border-radius: 6px;
}
Reply Quote
3 Night Elf Druid
0
I think it would be a good idea to put the languages into extra files to shrink the size and for example my site is english only atm, so I don't need any other languages currently and would leave the other out.

And afaik enGB/enUS and esMX/esES don't have differences.


Yeah, good reasoning. As you recommended, I moved all non "en_US" locales to seperate folders now, shrinking the main lib even further.

The new config option "locales" accepts an array of locales allowing you to override the default loading of all locales by inserting an empty array [] or only specific locales ["de_DE","en_GB"].

The locale files now sit in "wdt/locales/" in js files that match their locale id.

This is not yet available in a downloadable zip file, but the svn already holds these changes: http://code.google.com/p/wow-data-tooltip/
Reply Quote
82 Human Death Knight
2425
Oh duh... that makes much more sense. See? I told you I usually do things the hard way. :)

Here's my custom CSS that works for all tips (as a custom.css defined after yours):

.wdt-tooltip .ui-tooltip-content {
background-color: transparent;
}

.ui-tooltip-cluetip {
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}

.tooltip-item .data,
.tooltip-character .data,
.tooltip-realm,
.tooltip-guild,
.tooltip-arena,
.tooltip-quest,
.tooltip-404 {
padding: 6px;
background-color: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 5px #000000;
border: 1px solid #353837 !important;
border-radius: 6px;
}

.tooltip-item .data {
margin-left: 65px;
}

.tooltip-character .data {
margin-left: 95px;
}

.tooltip-item .icon,
.tooltip-character .thumbnail {
padding: 1px !important;
position: absolute;

background-color: #000000;
background-position: 1px 1px;
background-repeat: no-repeat;

border-color: #B1B2B4 #434445 #2F3032;
border-radius: 3px 3px 3px 3px;

border-left: 1px solid #434445;
border-right: 1px solid #434445;
border-style: solid;
border-width: 1px;

box-shadow: 0 0 5px #000000;
}


As I'm writing this I realized that I didn't test in IE, so there may be some additional tweaks needed (EDIT: Oh yeah, IE is fubar... I'll fix that up later... time to play now.. hehe).

Another thought I had while tinkering that you might add to your list: what about exposing some of the qtip settings in your settings? Specifically the positioning settings... I can't put my finger on it, but something about the way these tips position themselves seems a bit odd... hehe... I know that the idea with your tooltips is that anyone can use them, just drop them in place and run with them... so maybe this could be something that is more of an "advanced" option for anyone that wants to really tinker...

Awesome work, keep it up!
Edited by Jagor on 8/27/2011 6:49 PM PDT
Reply Quote
85 Human Mage
7995
One thing that Rhileu forgot to mention is that when accessing the API from the user's client (browser), the request is counted against the user's daily limit and not those of the web host. The requests will come from the IP of the user that is making the request, not the server. So for those who were concerned about their daily limits, there is no need to be.
Reply Quote

Please report any Code of Conduct violations, including:

Threats of violence. We take these seriously and will alert the proper authorities.

Posts containing personal information about other players. This includes physical addresses, e-mail addresses, phone numbers, and inappropriate photos and/or videos.

Harassing or discriminatory language. This will not be tolerated.

Forums Code of Conduct

Report Post # written by

Reason
Explain (256 characters max)
Submit Cancel

Reported!

[Close]