Popovers

6 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€91.90
List Price:  €128.66
You save:  €36.76
£77.46
List Price:  £108.45
You save:  £30.98
CA$137.18
List Price:  CA$192.05
You save:  CA$54.87
A$149.46
List Price:  A$209.26
You save:  A$59.79
S$134.45
List Price:  S$188.23
You save:  S$53.78
HK$780.84
List Price:  HK$1,093.20
You save:  HK$312.36
CHF 88.92
List Price:  CHF 124.49
You save:  CHF 35.57
NOK kr1,087.34
List Price:  NOK kr1,522.32
You save:  NOK kr434.98
DKK kr685.66
List Price:  DKK kr959.95
You save:  DKK kr274.29
NZ$166.05
List Price:  NZ$232.48
You save:  NZ$66.42
د.إ367.25
List Price:  د.إ514.17
You save:  د.إ146.91
৳11,750.88
List Price:  ৳16,451.71
You save:  ৳4,700.82
₹8,365.40
List Price:  ₹11,711.90
You save:  ₹3,346.49
RM467.60
List Price:  RM654.66
You save:  RM187.06
₦163,467.65
List Price:  ₦228,861.25
You save:  ₦65,393.60
₨27,821.93
List Price:  ₨38,951.82
You save:  ₨11,129.88
฿3,627.33
List Price:  ฿5,078.41
You save:  ฿1,451.08
₺3,309.64
List Price:  ₺4,633.64
You save:  ₺1,323.99
B$554.39
List Price:  B$776.17
You save:  B$221.78
R1,835.19
List Price:  R2,569.34
You save:  R734.15
Лв179.67
List Price:  Лв251.55
You save:  Лв71.87
₩138,891.63
List Price:  ₩194,453.85
You save:  ₩55,562.21
₪366.16
List Price:  ₪512.65
You save:  ₪146.48
₱5,832.20
List Price:  ₱8,165.31
You save:  ₱2,333.11
¥15,735.12
List Price:  ¥22,029.80
You save:  ¥6,294.68
MX$1,797.57
List Price:  MX$2,516.67
You save:  MX$719.10
QR366.07
List Price:  QR512.51
You save:  QR146.44
P1,353.25
List Price:  P1,894.61
You save:  P541.35
KSh12,796.22
List Price:  KSh17,915.22
You save:  KSh5,119
E£4,824.27
List Price:  E£6,754.18
You save:  E£1,929.90
ብር5,799.55
List Price:  ብር8,119.60
You save:  ብር2,320.05
Kz87,254.77
List Price:  Kz122,160.17
You save:  Kz34,905.40
CLP$93,318.66
List Price:  CLP$130,649.86
You save:  CLP$37,331.20
CN¥726.59
List Price:  CN¥1,017.26
You save:  CN¥290.66
RD$5,915.69
List Price:  RD$8,282.20
You save:  RD$2,366.51
DA13,468.15
List Price:  DA18,855.95
You save:  DA5,387.80
FJ$223.54
List Price:  FJ$312.97
You save:  FJ$89.42
Q776.05
List Price:  Q1,086.50
You save:  Q310.45
GY$20,922.12
List Price:  GY$29,291.81
You save:  GY$8,369.68
ISK kr13,758.62
List Price:  ISK kr19,262.62
You save:  ISK kr5,504
DH983.26
List Price:  DH1,376.61
You save:  DH393.34
L1,774.84
List Price:  L2,484.85
You save:  L710.01
ден5,643.10
List Price:  ден7,900.56
You save:  ден2,257.46
MOP$804.32
List Price:  MOP$1,126.08
You save:  MOP$321.76
N$1,829.88
List Price:  N$2,561.91
You save:  N$732.02
C$3,680.95
List Price:  C$5,153.48
You save:  C$1,472.52
रु13,383.04
List Price:  रु18,736.79
You save:  रु5,353.75
S/373.87
List Price:  S/523.43
You save:  S/149.56
K391.68
List Price:  K548.37
You save:  K156.68
SAR375.04
List Price:  SAR525.07
You save:  SAR150.03
ZK2,642.73
List Price:  ZK3,699.93
You save:  ZK1,057.20
L456.82
List Price:  L639.57
You save:  L182.74
Kč2,318.06
List Price:  Kč3,245.38
You save:  Kč927.32
Ft35,926.40
List Price:  Ft50,298.40
You save:  Ft14,372
SEK kr1,067.36
List Price:  SEK kr1,494.35
You save:  SEK kr426.98
ARS$92,465.76
List Price:  ARS$129,455.76
You save:  ARS$36,990
Bs691.10
List Price:  Bs967.56
You save:  Bs276.46
COP$401,538.22
List Price:  COP$562,169.58
You save:  COP$160,631.35
₡52,305.40
List Price:  ₡73,229.65
You save:  ₡20,924.25
L2,485.79
List Price:  L3,480.21
You save:  L994.41
₲754,748.31
List Price:  ₲1,056,677.83
You save:  ₲301,929.51
$U4,029.23
List Price:  $U5,641.08
You save:  $U1,611.85
zł393.99
List Price:  zł551.60
You save:  zł157.61
Already have an account? Log In

Transcript

Hello, in this bootstrap four video, we're going to show you popovers. popovers allow you to overlay some small bit of content technically, or overlay a large amount of content, but generally you only want something small. So it just informs the use of what the doing or what they're clicking on can essentially be assigned to any element. For some secondary information. It's really simple to use. popovers do require a third party library called tether for positioning, don't worry in the description, there will be a link to the source code from this video.

And on the source code, there will be the template file. It's not something we've returned, but it's something that you will need. I've already got it on the desktop, so we just need to include it. You just want to include it before. The bootstrap file simply because the bootstrap file requires that For popovers, so just put whatever is called for me is corteva dot j Yes. And now the next thing we need to do is actually enable popovers.

And to do that just get some script tags on the go. And inside here we are going to be doing some jQuery. So function and in here we can do dollar square bracket, data dash, toggle equals Popova. gonna chain these curves, they're conflicting with the opening tag and will complete with the closing tag. You can mix and match them doesn't really matter. Drop popover This is a method, this data dash toggle will be linked to the actual buttons themselves that we're ready to start coding.

So the scope here is going to do the first buttons on the button. It's gonna have a type of button. You can assign it essentially to any sort of element, like I said before, so you don't have to just do it to this to a button but I'm just going to do it to a b ut to N buttons, secondary data dash container equals body data dash toggle. This is basically what we put right here equals popover. And now we want data displacement. This will vary depending on where you want to put You're popover.

So the first thing I'm going to show you is top. And the next you need to actually put the data dash content and this is the information that you're displaying. Once the user clicks I and the popover appears. So for this ons gonna simply put top just to keep it really simple. And inside here, you just put whatever you want your button to be called block. So you don't have to use a button, you use something else on the top popover.

So I'm just gonna copy and paste this. A few things that we need to change these change, data placement, data content, and the text inside the button. So let's get this damn Left, left, left. Right. Right. And right.

Save that. And now if we go to our web browser, refresh, we got four buttons. And if we click the top popover, we have a popover. button. popover, left popover, right popover. At the moment, the only way to close these popovers is to actually click the button.

Again, it's very common for them to be closed. If you click outside of the popover. To do this, just need a bit of extra JavaScript and a bit of extra HTML. It's really simple. What you want to do is go to whatever button you basically want to make into a dismissable popover. So I'm going to do it with the right pop over for now.

Let's do it. For the rest of the extra task, but data dash and we need trigger equals focus. And as we scroll down to the JavaScript area, we want dollar dot pop over dash, dismiss dot Popova. And in here, all you want to do is set the trigger to focus Let's save that. refresh our web browser. I want to click on the top pop over the right pop over, click outside.

As you can see, the right pop holder has now disappeared simply because We've made it into a dismissable Popova. So that's it for popovers if you have any questions, feel free to post them on our education platform. So now learning Dakota UK for slash question dot php, there will be a link in the description along with a link to the source code from this video where you can also get the tether dot j. s file, please rate, comment and subscribe and it really does help us keep the content free Plus he also helps us learn what you liked and what you didn't like about the videos. And as usual, thanks for watching, and I hope you have a great day.

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.