Skip to content

Using SLDS Popovers

Hello everyone,

Here, we will learn the use of popovers of the lightning design system in lightning web
components.

Firstly, What is a popover?
A popover is used to display contextual information to the user.

  • Popovers must come with a triggering button
  • They must have at least one focusable element inside

Now, we will learn how can we show the popover in case of lightning-input to show any
useful information.
For example – I am using two lightning-input of type date and popover to show some
information about data validation here. The popover will trigger on the focus of the
lightning-input.

inputPopOver.html

<template>
    <div style="background:white;" class="slds-p-around_large">
        <template if:true={showStartPopOver}>
            <section aria-describedby="dialog-body-id-98" aria-label="Dialog Title"
                class="slds-popover slds-nubbin_bottom-left" role="dialog">
                <div class="slds-popover__body">
                    <p>Start date should be less than the end date.</p>
                </div>
            </section>
        </template>
        <lightning-input type="date" name="input1" label="Start Date" onfocus={showStartPop} onfocusout={closeStartPop}>
        </lightning-input>


        <template if:true={showEndPopOver}>
            <section aria-describedby="dialog-body-id-98" aria-label="Dialog Title"
                class="slds-popover slds-nubbin_bottom-left" role="dialog">
                <div class="slds-popover__body">
                    <p>End date should be greater than the start date.</p>
                </div>
            </section>
        </template>
        <lightning-input type="date" name="input2" label="End Date" onfocus={showEndPop} onfocusout={closeEndPop}>
        </lightning-input>
    </div>
</template>

inputPopOver.js

import { LightningElement,track } from 'lwc';

export default class InputPopOver extends LightningElement {

    @track showStartPopOver = false;
    @track showEndPopOver = false;

    showStartPop() {
        this.showStartPopOver = true;
    }

    showEndPop() {
        this.showEndPopOver = true;
    }

    closeStartPop() {
        this.showStartPopOver = false;
    }

    closeEndPop() {
        this.showEndPopOver = false;
    }
}
Published inCoding Mania

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *