[Music]
hey everyone and welcome back for
another tutorial in my ue4 tutorial
series in this episode I'm gonna go
through and add one extra thing to our
inventory system series I know I said we
were done but there's one thing we could
add that would make this thing a lot
smoother and fulfill a lot requests up
again and that is adding a tooltip
so we mouse over you a slot he'll show
details of the item in that slot okay so
let's go through that and finish this
series off so the first thing we need to
do is create the widget for what our
tooltip will look like okay so I'm gonna
go into my inventory UI folder and I'm
gonna make a new widget blueprint and
it's gonna be called talked it actually
yes keep our naming convention is the
same on a coal mine inventory tour tip
okay so I'm gonna tour towards it we
don't want our cameras panel we want to
get rid of that as we don't want
absolute now we're going to attach it to
the HUD that's the way existing and so
what we do need is a size box so size
box similar to how we done other widgets
such as our slots and our window this
one we're going to do a width override
of let's say 300 and our minimum height
though our high overwrite though we're
not going to use we're gonna use this
one minimum desired height now the
reason why we wouldn't do that is
because we don't know how much text is
going to be displayed in our tool tip so
if we do this it means it would be a
minimum of 100 for example and we will
then expand out to fit the content okay
so that's our size box done and so I can
see it on the screen I'm gonna change
from the field screen to desired and
that gets us the correct sizing so what
now is I want to add a border on to our
size box and our border we're going to
change the brush color to
something like this there we go and then
I want a vertical box into our border so
a vertical box is basically a panel
which allows us to stack all of its
contents vertically now how you lay this
out will depend on what if makes you
want to show in your tool tip I'm just
going to show the item name and the item
description okay so I'm just gonna do
that if you want to do like the image
with all that you should be able to
figure it out if not message me email me
whatever you like and I'll I'll give you
some pointers and which way to go so my
vertical box I need two texts so I want
text first text in and another text in
so the first text this is gonna be our
title of the hour item so I want to
underscore pH school
and item name and my description do
underscore pH underscore item
description so a couple of things with
these texts now on my item name and my
item description I want these two both
rap so if it extends beyond the length
of the box it will just go down to the
next line so this item name here we're
going to scroll down you'll see autorap
text check the box and do the same for
item description and I also want to
change the font size of my item
description so it's not the same as my
title just makes it easier to read an e
lot clearer to the player so the size
here it's got a 24 change it to 14 ya do
and we're done here so I'm going to
create two variables and assign them to
these texts okay so just go to the graph
and on the graph here I am going to
insert a new verbal and this is going to
be the item name
and three a text type and I went another
one called the item description and for
both of these I'm going to expose them
and make them editable meaning that when
I create this widget in real time I'll
be able to set it in real time what
about when you create this widget you're
all set these rebels on creation click
compile go back to the designer and now
we need to bind these text values to
those corresponding variables so Martin
named here combined and choose item name
and on description bind description and
we've done here click compile and that's
about it
so let's close this and let's go to our
inventory slot so we want to go onto the
graph editor and it's what we had last
time we've got a construct here we've
got an on mouse button down and whatever
else we're gonna make a new event here
and your vent we're gonna get is mouse
inter so when the mouse enters the slot
space we are going to spawn or create
our tooltip so let's do that
go out here create widget and choose the
tooltip and as you can see those
variables are now appearing because we
take that editable and expose on spawn
this is a spawn here they are exposed
now we need to plug values into these
and we get those from the salaat content
so dragged out it's not contents choose
get and we want to split this open so
write open right-click and split and
right-click and split to get all the
details of the item inside our slots so
we've got the item name going there and
nothing description go in there so what
we create the widget we now need to
attach it to the HUD so return value
we're going to promote to verbal
and I'm gonna name mine slot tool tool
tip ego slot taught it and from there
we're going to get the HUD and add this
to the HUD so our HUD if you remember
rightly is actually on our player
controller so get the player controller
and then we're going to cast it to my
player controller and as my player
controller we can now get their HUD
widget okay and then from there we can
get the HUD canvas which is what we're
going to attach our taught it to so I
wanted to touch their it means it'll
show up on the screen so with the HUD
canvas we're going to drag out and go
add a child to canvas when we're done
our content for this will be that slot
tooltip okay so we added the child
canvas now we need to position it and
size it correctly so let's do the sizing
first so on return value except size and
you up set to auto size and tick the box
and again from the return value dragged
out and we want to set position and the
position we're going to set to it with a
mouse position because we want the
taught it to appear aware of the mouse
cursor lands okay so the in position
it's going to come from the get mouse
position on viewport and I will turn the
X&Y coordinates this is a
two-dimensional vector XY coordinates
from the mouse position on the screen
and set it to whatever that is in here
okay so now make it up here and we can
test this out if we go into our thing
here and let's pick up some herbs I can
right click and you see green herb here
there none none
but he said his issue is that it's now
spawning loads of tooltips which we
don't want cuz I still stick around so
what we want to do is do on Mouse leave
so we've got mouse enter we wanted to
check when mouse leave and here we're
going to simply remove the slot tooltip
from its parent so just guess locked
tooltip and then from there remove from
parent and I removed it from its parent
panel which is the camera slot which we
sit over here so I remove it and the
next thing I do is actually to save it
from creating loads or tooltips actually
we should be like we won't yeah it
should be alright we don't need to clear
it I don't think let's see we don't I
think we need to clear it just go into
our game push play and you see there the
tooltip disappears when I mouse leaves
and appears my mouse enters okay good
good okay so the next thing I do is I
don't want it to show none where's
nothing in this lot okay I'm gonna get
rid of that tooltip I don't like to show
if there's nothing in a slot so from
there I'm gonna go to the inventory tool
tip and go to the graph and I will go to
its construct event and what want to do
is I'm gonna check on its construct what
the item name is and if it's none then I
want to set the visibility of this tool
tip to be hidden so the item name drag
that out just get and then get equals to
text and it's a beauty of ranch so
branch because we're asking it a
question and the question we are asking
is item name equal to another piece of
text which will be literal
Tech's and that's how you you get that
you can actually type in now some text
here none so if it is equal to none
so true here we are going to change the
visibility of our entire slot okay
and I think we can do it from here
visibility yes set the possibility
anyone change the visibility down to
hidden click compile go back to your
game now if I go to my inventory it
won't show a tooltip unless it has a
slight bug there weren't wrapping
automatically straightaway Oh a weird
dollar what is after mm-hmm let's try
resetting
let's try clear that memory out so with
a slot tooltip when we've done the
emmaus and leave and I drag this out and
choose set tooltip drag that in and
leave this blank okay let's see if that
fixes that little over yeah I seem oh I
don't know
strange might be something weird with
the unreal I'll get back to you on that
one it might have something to do the
pre construct maybe pre construct by the
way you can see the thought it working
there and it won't show if there's
nothing in the slot so green herb a
simple green herb that can restore a
small amount of health and the
description you set in the items so herb
yeah okay and if I'm going to my walk
and say here a sturly rock ready for any
building project
bleh
pick up some rocks and there you go and
that's all there is to it and that I
think will do for the inventory system
for a while now thank you for watching
this whole entire series if you have any
questions or concerns or queries do you
want to ask please leave a comment below
or you can message me directly at my
email address Twitter whatever you
really like if you like these videos and
want to support me making my videos I do
have a patreon available which you can
click in the description or on my about
page and you can there donate just $1 a
month and you'll get access to videos to
weeks ahead of time so you can get a
head start on any kind of video releases
we do okay so thank you for your support
and thank you for watching and I'll see
you next time
see ya
[Music]