[SOLVED]Want a TorchLight's Tooltip System

For help with general CEGUI usage:
- Questions about the usage of CEGUI and its features, if not explained in the documentation.
- Problems with the CMAKE configuration or problems occuring during the build process/compilation.
- Errors or unexpected behaviour.

Moderators: CEGUI MVP, CEGUI Team

pizzazhang
Not too shy to talk
Not too shy to talk
Posts: 23
Joined: Wed Apr 13, 2011 14:54
Location: Shanghai/China

[SOLVED]Want a TorchLight's Tooltip System

Postby pizzazhang » Thu Apr 21, 2011 06:22

Hey,
Recently I consider implementing a items' information displaying system in a application. I play the TorchLight and find that they seem to use a tooptip to display the equip or item's information in the game. I look into the Torchlight's ui files and find the tooltip is a layout file which format is like this:

Skill Name:<StaticText>
Skill Picture:<StaticImage>
Description:
...
-------------------------------
CoolDown:
...
-------------------------------

It's totally a .layout file! In CEGUI I only get a tooltip in a rectangle range. I recognize that I can change the tooltip's LookNFeel but is it possible to use a layout as a tooptip just like TorchLight? (I know it is definitely possible as TorchLight use CEGUI for its GUI displaying but I don't know how it will be possible :roll: )
Any tips or advice will be appreciated!
Last edited by pizzazhang on Sat Apr 23, 2011 09:33, edited 1 time in total.

User avatar
CrazyEddie
CEGUI Project Lead
Posts: 6760
Joined: Wed Jan 12, 2005 12:06
Location: England
Contact:

Re: Want a TorchLight's Tooltip System

Postby CrazyEddie » Thu Apr 21, 2011 08:50

I imagine they either did not use the inbuilt tooltip functionality, implementing a custom solution in which they show/hide the window holding the 'tooltip layout' as needed, or they created some kind of custom Tooltip subclass and used that - which could have some logic whereby instead of setting a basic text string as a tooltip, they assign some loaded window layout or something?

CE.

pizzazhang
Not too shy to talk
Not too shy to talk
Posts: 23
Joined: Wed Apr 13, 2011 14:54
Location: Shanghai/China

Re: Want a TorchLight's Tooltip System

Postby pizzazhang » Thu Apr 21, 2011 10:06

CrazyEddie wrote:I imagine they either did not use the inbuilt tooltip functionality, implementing a custom solution in which they show/hide the window holding the 'tooltip layout' as needed, or they created some kind of custom Tooltip subclass and used that - which could have some logic whereby instead of setting a basic text string as a tooltip, they assign some loaded window layout or something?

CE.

I consider the 'tooltip layout' as a Tooltip because its action is almost the same to the really Tooltip (when mouse hover an item the 'tooltip layout' fade in). But I also find some differences like when I'm moving mouse around an item, the 'tooltip layout' will move to the mouse's position too. If it's just a layout window to show/hide then every 'item window' in the game should subscribe the MouseEntersArea Event. So I think they maked their custom Tooltip class in their game and this will be some difficulty to me :? However, I'll try it :D

User avatar
Jabberwocky
Quite a regular
Quite a regular
Posts: 86
Joined: Wed Oct 31, 2007 18:16
Location: Canada
Contact:

Re: Want a TorchLight's Tooltip System

Postby Jabberwocky » Thu Apr 21, 2011 19:45

You can make nice looking tooltips using just font and image tags in your tooltip text. No .layout changes or custom tooltips needed.

Examples from my game:
Image
(My tooltip background is slightly transparent, so some background images/text leak through a but.)

Here's a function I use in my game that takes a CEGUI::Window* and an Item* (a class defined in my game), and sets the tooltip on the window based on the properties of the item. You can see how I set different fonts, images, text colours, and spacing using the tags.

I hand edited this function to strip out unrelated code and hopefully make it more clear. Also, the fonts I use aren't regularly installed with CEGUI so you'll need to replace them with the fonts you use.

Code: Select all

void FormatItemTooltip( CEGUI::Window* i_pItemWidget, const Item* i_pItem )
{
   if ( !i_pItemWidget || !i_pItem )
   {
      assert( false );
      return;
   }

   std::stringstream ssTooltip;
   ssTooltip
      << "[font='BlueHighway-12'][colour='FF000000']" << i_pItem->GetName() << std::endl
      << "[top-padding='5'][bottom-padding='10'][image-width='70'][image-height='70'][colour='FFFFFFFF'][image='" << i_pItem->GetIconName() << "']" << std::endl
      << "[top-padding='0'][bottom-padding='0'][font='BlueHighway-10'][colour='FF000000']" << i_pItem->GetDescription() << std::endl
      << "Tech Level: " << i_pItem->GetTechLevel() << std::endl;

   i_pItemWidget->setTooltipText( ssTooltip->str() );
}


The Item::GetIconName function will return a string like "set:icons image:vortex_armor", pointing to an image you have defined in a CEGUI .imageset file somewhere.

If you don't like the background colour of the tooltip, it's easy change with an image editor (photoshop, gimp, etc). Just open your skin image (e.g. TaharezLook.png) and change the colours of the tooltip images. If you're having trouble figuring out which image is the tooltip, open your imageset file (e.g. TaharezLook.imageset) and search for "tooltip". It will tell you their position.
The Salvation Prophecy
Space Combat. Planet Exploration. Strategic Domination.

pizzazhang
Not too shy to talk
Not too shy to talk
Posts: 23
Joined: Wed Apr 13, 2011 14:54
Location: Shanghai/China

Re: Want a TorchLight's Tooltip System

Postby pizzazhang » Fri Apr 22, 2011 02:32

Jabberwocky wrote:You can make nice looking tooltips using just font and image tags in your tooltip text. No .layout changes or custom tooltips needed.


Thanks for your so helpful tips to me! You save my time! :rofl:

pizzazhang
Not too shy to talk
Not too shy to talk
Posts: 23
Joined: Wed Apr 13, 2011 14:54
Location: Shanghai/China

Re: Want a TorchLight's Tooltip System

Postby pizzazhang » Fri Apr 22, 2011 04:23

Jabberwocky wrote:You can make nice looking tooltips using just font and image tags in your tooltip text. No .layout changes or custom tooltips needed.
......

Hey, I just implement your tooltip system, but a little problem.
Here is what I get:
Image
I change the text colour but the text is always black or white (white means nothing on the tooltip canvas) and the other colour seems don't work. Also, the picture I use is totally black or white which looks very ugly to me. I don't change code of what you provided(just change the font, image, text and colour), what I write is like this:

Code: Select all

      CEGUI::Window* itemWidget = MyGUISystem::getSingletonPtr()->getWindow("Item1");
      std::stringstream ssTooltip;
      ssTooltip
         <<"[font='SimHei-14'][colour='FF00FFFF']"<<"Item1"<<std::endl
         <<"[top-padding='5'][bottom-padding='10'][image-width='70'][image-height='70'][colour='FFFFFFFF'][image='"
         <<"set:items image:item1"<<"']"<<std::endl
         <<"[top-padding='0'][bottom-padding='0'][font='SimHei-14'][colour='FFFF0000']" << "This is Item1 !" << std::endl
         <<"Tech Level: " << "level 14" << std::endl;
      itemWidget->setTooltipText(ssTooltip.str());

MyGUISystem is a class that I put CEGUI things in.
Do you have any advice to my situation? Thanks in advance!

User avatar
Jabberwocky
Quite a regular
Quite a regular
Posts: 86
Joined: Wed Oct 31, 2007 18:16
Location: Canada
Contact:

Re: Want a TorchLight's Tooltip System

Postby Jabberwocky » Sat Apr 23, 2011 09:25

Yeah, the problem is your tooltip text is black. You need to change it to white, then everything will work properly.

Open your looknfeel file (TaharezLook.looknfeel or whatever), search for "tooltip", find the tooltip section that says <ImagerySection name="label">, then underneath that change this:

Code: Select all

            <Colours topLeft="FF000000" topRight="FF000000" bottomLeft="FF000000" bottomRight="FF000000" />


to this:

Code: Select all

            <Colours topLeft="FFFFFFFF" topRight="FFFFFFFF" bottomLeft="FFFFFFFF" bottomRight="FFFFFFFF" />
The Salvation Prophecy

Space Combat. Planet Exploration. Strategic Domination.

pizzazhang
Not too shy to talk
Not too shy to talk
Posts: 23
Joined: Wed Apr 13, 2011 14:54
Location: Shanghai/China

Re: Want a TorchLight's Tooltip System

Postby pizzazhang » Sat Apr 23, 2011 09:33

Jabberwocky wrote:Yeah, the problem is your tooltip text is black. You need to change it to white, then everything will work properly.

Yeah, now it works right. Thank you very much! :D


Return to “Help”

Who is online

Users browsing this forum: No registered users and 16 guests