Material: Popover component similar to Bootstrap

design material
1

I think popover component can be implement by mixing modal and dropdown elements. But to achieve the same effect as popover of bootstrap in material, I think there should be a dedicated component.

Currently there is no dedicated component for showing notification popover similar to

Screen Shot 2016-05-01 at 12.06.45 AM.png1066×616 52 KB

2

Material currently does not have the exact equivalent of Bootstrap’s popover, but this can be easily reproduced simple by using a dropdown element with some customised CSS maybe. A quick example below:

The code will roughly look like:

<div class="dropdown-menu dropdown-menu-right" style="min-width: 320px; padding-top: 0 !important; padding-bottom: 0 !important;">
    <div class="tile">
        <div class="tile-inner text-black">
            <strong>Notifications</strong>
        </div>
    </div>
    <div class="tile">
        <div class="tile-side pull-left">
            <div class="avatar avatar-sm">
                <img ...>
            </div>
        </div>
        <div class="tile-inner text-black">
            <span>...</span>
        </div>
    </div>
    <div class="tile">
        <div class="tile-side pull-left">
            <div class="avatar avatar-sm">
                <img ...>
            </div>
        </div>
        <div class="tile-inner text-black">
            <span>...</span>
        </div>
    </div>
    <div class="tile">
        <div class="tile-side pull-left">
            <div class="avatar avatar-sm">
                <img ...>
            </div>
        </div>
        <div class="tile-inner text-black">
            <span>...</span>
        </div>
    </div>
    <a class="tile">
        <div class="tile-inner text-black text-center">
            <span>Show All</span>
        </div>
    </a>
</div>

Hope this helps.

3

Perhaps we should be back-filling Bootstrap elements and making them Material-like?

4

Thanks for the code. Couldn’t have asked for anything more. It’s working like a charm.

I don’t know about other elements of bootstrap but I am sure that code above is very good replacement of bootstrap popover.

But if you are implementing a popover. Make sure to implement right margin feature. Let’s say if we are having 2-3 popover in the top navbar then the right margin of all them should not be independent, they should be same as seen in facebook and google.

1 Like