Topic: Popover arrow
Hi,
I't like my popvers to look like shown on the bootstrap page with the nice arrow. The mdb does not show an arrow, where the context to the triggering field is not as obvious anymore.
How can this be achieved?
Marc
Hello, you can use CSS
.popover .popover-arrow {
display: block;
}
Here is an example: https://mdbootstrap.com/snippets/standard/m-duszak/3687499#css-tab-view
Color the arrow:
Top:
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after, .bs-popover-top>.popover-arrow:after {
border-top-color: red;
}
Bottom:
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after, .bs-popover-bottom>.popover-arrow:after {
border-bottom-color: blue;
}
Right:
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after, .bs-popover-end>.popover-arrow:after {
border-right-color: green;
}
Left:
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after, .bs-popover-start>.popover-arrow:after {
border-left-color: yellow;
}
I have updated the snippet.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: MDB5 3.10.2
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No