[SOLVED]Want a TorchLight's Tooltip System

[pizzazhang]

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 )
Any tips or advice will be appreciated!

[CrazyEddie]

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]

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

[Jabberwocky]

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:

(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.

[pizzazhang]

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!

[pizzazhang]

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:

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!

[Jabberwocky]

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" />

[pizzazhang]

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!