Up next in 10
React.js Tutorial to Display Animated Overlays and Tooltip Popper Messages Using react-popper in JSX
Jan 9, 2025
Buy the full source code of application here:
View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will show you how to
0:04
display this popup messages inside react
0:08
CH so popper is actually a message that
0:13
you can display whenever you click the
0:15
button tool tip messages so we have a
0:18
simple example right here so when I
0:20
click the button uh there is simple tool
0:23
tip message which is showing right here
0:24
poer message so you can customize the
0:28
look and the feel of this message you
0:29
can change the background color you can
0:31
change the text color as well you can
0:34
change the position as well because it
0:36
is displaying it at the bottom position
0:37
you can change at any
0:40
location so the package is called as if
0:43
you go to npmjs.com and just search for
0:45
this package react tool
0:51
tip so this is essentially this package
0:54
I'm using uh this is the command here
0:56
I've already installed it it's almost
0:59
having five 79,000 weekly download so
1:03
it's a pretty popular package so here
1:06
you can show these overlay
1:08
messages so I will show you the complete
1:11
example so just make a simple functional
1:14
component and then you need to require
1:17
this
1:18
uh it is used poer and it will be coming
1:23
from react poer it is almost 4 kiloby
1:26
size and then inside our application we
1:29
need to declare some State variables for
1:32
toggling the visibility of this message
1:34
you'll be having a Boolean parameter
1:37
initial value will be false using the
1:39
UST State hook and secondly you'll be
1:42
giving it this reference
1:46
element and initial value will be
1:50
null and thirdly we'll be having this
1:53
poer
1:58
element initial value will again be
2:02
null and lastly you'll be having an
2:04
object which will
2:07
hold the style and the
2:10
attributes and for this we are using
2:12
this use proper hook that is available
2:15
inside this package so here we can
2:18
Define the reference element we have
2:21
passed the reference
2:24
element and then the second argument is
2:27
your proper element
2:33
so this is the element on which you need
2:35
to show this popup message and this is
2:38
the actual popup message so these are
2:40
the two things now we come to the jsx
2:43
wherever you need to display this and in
2:46
the parent div let me give it a padding
2:48
of 50
2:50
pixel and align it in the center
2:52
position and right here we having this
2:55
button uh we will give it a
2:58
reference of set set reference element
3:01
we have this element right here we
3:04
giving this property set reference
3:11
element so this button will simply say
3:15
that
3:16
toggle poer and when we click this
3:19
button we binding this on click listen
3:21
now so when we click this button we will
3:23
execute this
3:25
function which is set show
3:33
and here you'll be passing the whatever
3:35
is the value opposite of show variable
3:38
so if it's true then you'll make it
3:40
false so depending upon the value of
3:43
show parameter we will show the proper
3:48
message like this so we are having this
3:51
conditional jsx expression so if the
3:53
value of show is true then in that case
3:56
we'll be showing the pop of message for
4:00
this we'll be providing this reference
4:03
which is set proper
4:07
element and we can even give some
4:09
additional styles that I showed you can
4:12
give it a style object so whatever is
4:15
the styles of the
4:18
popper additionally we will change this
4:21
background
4:22
color to light blue and can do this like
4:27
this can give it a padding of 10
4:31
pixel and a border
4:35
of 1 pixel solid
4:40
black and right here we'll be saying the
4:43
attributes s up
5:05
so this will be right
5:09
here and here you can give it a simple
5:12
label that this
5:16
is overlay poer tool
5:20
tip so when you click the button now so
5:22
what happens is that it this tool tip
5:26
show so if you go to the browser click
5:29
on this button and now if you see this
5:32
message will show here you can change
5:35
the color here uh you can change it to
5:37
Red so now the the color of the
5:40
background color changes so in this way
5:42
you can show these nice little overlay
5:45
popup message using this package tool
5:49
tip
5:51
messages so it has got a nice little
5:53
documentation you can read it so thank
5:56
you very much for watching this video
5:57
and do check out my website as as well
6:00
free mediat tools.com
6:02
uh which contains thousands of tools
6:04
regarding audio video and image and I
6:08
will be seeing you in the next video
#Programming
#Web Design & Development