MarcRohrer free asked 9 months ago


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


MarcRohrer free answered 8 months ago


works, thanx! quite complicated though :-(


Michał Duszak staff answered 9 months ago


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.


MarcRohrer free answered 9 months ago


and how can I color the arrow?


Michał Duszak staff answered 9 months ago


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



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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