GUI Tooltips

[Tails]

Hey it's me again

Is there any way I could enable tooltips for my checkboxes or on any other part of my GUI?

I tried:

guiSetProperty(mycheckbox, "Tooltip", "test") 

but unfortunately that didn't work.

Any ideas? Thanks in advance

[botder]

You have to make tooltips by yourself with DirectX functions (use the GUI events Focus and Blur to know which gui element is being hovered).

Edited October 12, 2014 by Guest

[Tails]

Guess I'll have to do that then! Thanks!

[Tails]

I there any way I could use https://wiki.multitheftauto.com/wiki/OnClientMouseEnter instead? I need it to popup on mouse over not on input focus.

[botder]

My mistake. Use that

[Tails]

No worries. Could you give me an example? I mean how do I use for it only one specific GUI? Not all of them.

[botder]

I made a resource solution, that means a single resource handles the rendering for every gui element, which has a tooltip element data.

Example:

Result:

Code:

  
-- Settings 
local font_face = "arial" 
local font_widthscale = 1 
local font_heightscale = 1 
local font_color = tocolor(255, 255, 255) 
local background_color = tocolor(0, 0, 0, 200) 
local hovertime = 500 
local cursor_offsetx = 15 
local cursor_offsety = -10 
local padding_top = 5 
local padding_right = 5 
local padding_bottom = 5 
local padding_left = 5 
  
-- Variables 
local screenWidth, screenHeight = guiGetScreenSize() 
local height = dxGetFontHeight(font_heightscale, font_face) 
local tooltip = false 
local width = 0 
local hoverstart = 0 
  
addEventHandler("onClientRender", root, 
    function () 
        if (tooltip and (isCursorShowing() or isConsoleActive() or isChatBoxInputActive())) then 
            if (hoverstart + hovertime < getTickCount()) then 
                local x, y = getCursorPosition() 
                x, y = screenWidth * x, screenHeight * y 
                x, y = x + cursor_offsetx, y + cursor_offsety 
                dxDrawRectangle(x, y, width + padding_left + padding_right, height + padding_top + padding_bottom, background_color, true) 
                dxDrawText(tooltip, x, y, x + width + padding_left + padding_right, y + height + padding_top + padding_bottom, font_color, font_widthscale, font_heightscale, font_face, "center", "center", false, false, true, true, true) 
            end 
        end 
    end 
) 
  
addEventHandler("onClientMouseEnter", root, 
    function () 
        local text = getElementData(source, "tooltip") 
        if (type(text) == "string" and #text > 0) then 
            tooltip = text 
            local withoutcolor = text:gsub("#%x%x%x%x%x%x", "") 
            width = dxGetTextWidth(withoutcolor, font_widthscale, font_face) 
  
            if (#withoutcolor == 0) then 
                tooltip = false 
                return 
            end 
  
            hoverstart = getTickCount() 
        end 
    end 
) 
  
addEventHandler("onClientMouseLeave", root, 
    function () 
        tooltip = false 
    end 
) 
  

[DakiLLa]

You could also use 'tooltips' resource provided with the Map Editor, or this one from the community.multitheftauto.com.

[Saml1er]

I made a resource solution, that means a single resource handles the rendering for every gui element, which has a tooltip element data.

Example:

Result:

Code:

  
-- Settings 
local font_face = "arial" 
local font_widthscale = 1 
local font_heightscale = 1 
local font_color = tocolor(255, 255, 255) 
local background_color = tocolor(0, 0, 0, 200) 
local hovertime = 500 
local cursor_offsetx = 15 
local cursor_offsety = -10 
local padding_top = 5 
local padding_right = 5 
local padding_bottom = 5 
local padding_left = 5 
  
-- Variables 
local screenWidth, screenHeight = guiGetScreenSize() 
local height = dxGetFontHeight(font_heightscale, font_face) 
local tooltip = false 
local width = 0 
local hoverstart = 0 
  
addEventHandler("onClientRender", root, 
    function () 
        if (tooltip and (isCursorShowing() or isConsoleActive() or isChatBoxInputActive())) then 
            if (hoverstart + hovertime < getTickCount()) then 
                local x, y = getCursorPosition() 
                x, y = screenWidth * x, screenHeight * y 
                x, y = x + cursor_offsetx, y + cursor_offsety 
                dxDrawRectangle(x, y, width + padding_left + padding_right, height + padding_top + padding_bottom, background_color, true) 
                dxDrawText(tooltip, x, y, x + width + padding_left + padding_right, y + height + padding_top + padding_bottom, font_color, font_widthscale, font_heightscale, font_face, "center", "center", false, false, true, true, true) 
            end 
        end 
    end 
) 
  
addEventHandler("onClientMouseEnter", root, 
    function () 
        local text = getElementData(source, "tooltip") 
        if (type(text) == "string" and #text > 0) then 
            tooltip = text 
            local withoutcolor = text:gsub("#%x%x%x%x%x%x", "") 
            width = dxGetTextWidth(withoutcolor, font_widthscale, font_face) 
  
            if (#withoutcolor == 0) then 
                tooltip = false 
                return 
            end 
  
            hoverstart = getTickCount() 
        end 
    end 
) 
  
addEventHandler("onClientMouseLeave", root, 
    function () 
        tooltip = false 
    end 
) 
  

Why don't you set the element data sync to false otherwise this element data will be synced with server side which is not needed?

setElementData(element,string,value,false) 

Edit: or the element data doesn't exist server side because the element is client side?

[botder]

That was only an example code

And I am not even sure if the server would apply the element data to a GUI element, which is not known serverside.

[Tails]

Yeah don't worry it's all clientside. Thank you, Necktrox.

[Tails]

You could also use 'tooltips' resource provided with the Map Editor, or this one from the community.multitheftauto.com.

How do you use it?

[DakiLLa]

Well, the description of the resource says its all clearly..

Assign any string in "tooltip-text" key as custom data to your GUI element with setElementData() and let the magic do the magic. Simple example:

my_btn = guiCreateButton( ... ) 
setElementData( my_btn, "tooltip-text", "This is my fancy button", false ) 

Make sure 'tooltips' resource is started. Hover your mouse cursor over the button and you will see a bubble with text on top of it.

[Tails]

Oh my bad, I meant the tooltip resource from the official map editor. Do you know how to use that one?

[DNL291]

Oh my bad, I meant the tooltip resource from the official map editor. Do you know how to use that one?

addEventHandler( "onClientResourceStart", resourceRoot, 
    function() 
        -- Create(x, y, text, foregroundColor, backgroundColor) 
        local BGColor = tocolor(140, 140, 240) 
        local FGColor = tocolor(0, 0, 0) 
        tip = Create(200, 350, "Your tooltip text here", FGColor, BGColor) 
        FadeIn(tip) -- Show the tip 
    end 
)