This topic explains, with code examples, how to configure the look-and-feel of the igPopover™ control using CSS. This includes setting the background color of the content, the visibility and color of the pointer, the color of the header, and the appearance of the Close button.
The following topics are prerequisites to understanding this topic:
igPopover Overview: This topic provides an overview of the igPopover control and its main features and functionality.
Adding igPopover: This topic demonstrates, with code examples, how to add the igPopover control to an HTML page in either JavaScript or ASP.NET MVC.
This topic contains the following sections:
The styling of the igPopover control relies entirely on CSS classes. To change the look-and-feel of the popover, you need to override the classes on which the popover elements depend. The illustration below demonstrates a sample styling of the igPopover control (rounded corners of the main popover container and to changed background color.)
The following table lists the styling aspects of the igPopover control and the CSS classes that configure them. Further details are available after the table.
| Styling aspect | Details | CSS classes |
|---|---|---|
| Body text area | The body text area is equal to the main popover container. |
|
| Header | The classes applied to the header container have effect only if the header has been defined in the options (i.e. the headerTemplate.title property has been set). |
|
| Pointer | The size and the color of the popover pointer arrow are configurable. |
|
| Close button | The size of the close button icon, the image of the close button icon, and the position of the button in the header are configurable. There is a separate class to configure each of these styling aspects. |
Configures the size of the button icon
Configures the image of the button icon
Configures the position of the close button in the header template |
The following table lists the code examples included in this topic.
| Example | Description |
|---|---|
| Changing the Color and Corners of the Main Popover Container | The example applies rounded corners to the main igPopover container and changes the background color of the popover. |
| Removing the Popover Pointer | The example removes the igPopover’s pointer arrow and to achieve a tooltip-like appearance of the popover. |
The example applies rounded corners to the main igPopover container and changes the background color of the popover body content area (the main container). To this end, you need to change the background color of the arrows (left, right, top, bottom) and the title.
Following is the code that implements this example.
In HTML:
<style type="text/css">
.ui-igpopover > .ui-widget-content {
background-color: #f9e6e7;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;
}
.ui-igpopover-arrow-left {
border-right-color: #f9e6e7;
}
.ui-igpopover-arrow-top {
border-bottom-color: #f9e6e7;
}
.ui-igpopover-arrow-bottom {
border-top-color: #f9e6e7;
}
.ui-igpopover-arrow-right {
border-left-color: #f9e6e7;
}
.ui-igpopover-title {
background-color: #f9e6e7;
}
</style>
The example shows how to remove the popover arrow. This might be useful when you want to achieve a tooltip-like look of the popover.
To this end you need to set border width of the pointer arrow to zero.
Following is the code that implements this example.
In HTML:
<style type="text/css">
.ui-igpopover-arrow {
border-width: 0px;
}
</style>
The following topics provide additional information related to this topic.
igPopover control.The following samples provide additional information related to this topic.
Basic Usage: This sample demonstrates the igPopover control in an ASP.NET MVC scenario. The control is initialized in the View using chaining syntax.
ASP.NET MVC Usage: This sample demonstrates the basic initialization scenarios (on a single target element and on multiple target elements) of igPopover in JavaScript.
View on GitHub