Version

Adding igPopover

Topic Overview

Purpose

This topic explains, with code examples, how to add the igPopover™ control to an HTML page in either JavaScript or ASP.NET MVC.

Required background

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.

In this topic

This topic contains the following sections:

Adding igPopover – Conceptual Overview

Adding igPopover summary

The igPopover control can be initialized on any DOM element (called “target element”). The igPopover renders it content in nested DIV elements. By default, the content is the title of the target element, but it can also be a hard-coded string, HTML content, or a JavaScript function returning HTML string.

Requirements

The following table summarizes the requirements for adding the igPopover control.

Requirement / Required Resource Description What you need to do…
jQuery and jQuery UI JavaScript resources Ignite UI for jQuery™ is built on top of these frameworks: Add script references to both libraries in the <head> section of your page.
igPopover JavaScript resources The igPopover functionality of the Ignite UI for jQuery library is distributed across several files. You can load the required resources in one of the following ways:
  • (Recommended) Use the Infragistics® Loader (igLoader™). You only need to include a script reference to igLoader on your page.
  • Load the required resources manually. You need to use the dependencies listed in the table below.
The following table lists the Ignite UI for jQuery library dependences related to the igPopover control. These resources need to be referred to explicitly if you chose to load resources manually (i.e. not to use igLoader).
JS Resource Description
infragistics.ui.popover.js The igPopover control

Add one of the following:
  • A reference to igLoader
  • A reference to all the required JavaScript files (listed in the table on the left).
IG theme (Optional) This theme contains the visual styles for the Ignite UI for jQuery library. The theme file is: {IG CSS root}/themes/Infragistics/infragistics.theme.css
igPopover structure The styles from the following CSS file are used for rendering various elements of the control: {IG CSS root}/structure/modules/infragistics.ui.popover.css Add style reference to the file in your page.

Note: It is recommended to use the igLoader component to load JavaScript and CSS resources. For information on how to do this, refer to the Adding Required Resources Automatically with the Infragistics Loader topic. In addition to that, in the online Ignite UI for jQuery Samples Browser, you can find some specific examples on how to use the igLoader with the igPopover component.

Steps

Following are the general conceptual steps for adding igPopover to an HTML page.

  1. Adding the target HTML element

  2. Adding the igPopover control

Adding igPopover in JavaScript – Procedure

Introduction

This procedure guides you through the steps of adding igPopover with basic functionality to an HTML page using a pure HTML/JavaScript implementation. It uses the Infragistics Loader component to load all Ignite UI for jQuery resources needed by the igPopover control.

The procedure adds a basic igPopover control with default configuration to an input HTML element. The popover contains the title of the input and shows when the user hovers over the element with the mouse.

Preview

The following screenshot is a preview of the final result: the popover displaying as a result of a user action in the UI.

Prerequisites

The required resources added and properly referenced. (For a conceptual overview of those resources, see Requirements.) These include:

  • The required files added to their appropriate locations:

    • The required jQuery and jQueryUI JavaScript resources added to a folder named Scripts in the directory where your web page resides.

    • The Ignite UI for jQuery CSS files added to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).

    • The Ignite UI for jQuery JavaScript files added to a folder of your web site or application named Scripts/ig (For details, see the Using JavaScript Resources in Ignite UI for jQuery topic).

  • The required JavaScript resources referenced in the section of the page.

In HTML:

<script  type="text/javascript" src="Scripts/jquery.js"></script>
<script  type="text/javascript" src="Scripts/jquery-ui.js"></script>
  • The igLoader component referenced on the page.

In HTML:

<script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
  • The igLoader component instantiated:

In HTML:

<script type="text/javascript">
    $.ig.loader({
        scriptPath: "Scripts/ig/",
        cssPath: "Content/ig/",
        resources: “igPopover"
    });
<script>

Overview

Following is a conceptual overview of the process:

  1. Adding the target HTML element

  2. Adding the igPopover control

Steps

The following steps demonstrate how to add a basic igPopover control in HTML page.

  1. Add the target HTML element.

    Add an HTML element to be a target of igPopover.

    For this example procedure, add an input HTML element.

    In HTML:

     <input id=”firstName” type=”text” title=”Please enter your first name” value=””>

  2. Add the igPopover control.

    Instantiate the igPopover control.

    Add the initialization code to a script element in the HTML page. The initialization code creates igPopover instance targeting the target element created in step 1.

    The following code creates an instance of the igPopover control without specifying its options. It targets the input element “firstName” created in step 1.

    In JavaScript:

     $.ig.loader(function () {
     //  Create a basic igPopover control
     $("#firstName").igPopover();
 });

Adding igPopover in ASP.NET MVC – Procedure

Introduction

This procedure guides you through the steps of adding igPopover with basic functionality to an ASP.NET MVC View. The procedure uses the ASP.NET MVC syntax together with the required Loader configuration.

The procedure adds a basic igPopover control with default configuration to an input HTML element. The popover contains the title of the input and shows when the user hovers over the element with the mouse.

Preview

The following screenshot is a preview of the final result: the popover displaying as a result of a user action in the UI.

Prerequisites

To complete the procedure, you need the following:

The required resources added and properly referenced. (For a conceptual overview of those resources, see Prerequisites.) These include:

  • The required files added to their appropriate locations:

    • The required jQuery and jQueryUI JavaScript resources added to a folder named Scripts in the directory where your web page resides.

    • The Ignite UI for jQuery CSS files added to a folder named Content/ig (For details, see the Styling and Theming Ignite UI for jQuery topic).

    • The Ignite UI for jQuery JavaScript files added to a folder of your web site or application named Scripts/ig (For details, see the Using JavaScript Resources in Ignite UI for jQuery topics).

  • The required JavaScript resources referenced in the section of the page.

In HTML:

<script  type="text/javascript" src="Scripts/jquery.js"></script>
<script  type="text/javascript" src="Scripts/jquery-ui.js"></script>
  • The igLoader component referenced on the page.

In HTML:

<script  type="text/javascript" src="Scripts/ig/infragistics.loader.js"></script>
  • The igLoader component instantiated in ASP.NET view:

In HTML:

@(Html.Infragistics()
     .Loader()          .ScriptPath("http://localhost/ig_ui/js/")
     .CssPath("http://localhost/ig_ui/css/")
     .Render()
)

Overview

Following is a conceptual overview of the process:

  1. Adding the target HTML element

  2. Adding the igPopover control

Steps

The following steps demonstrate how to add a basic igPopover control to an ASP.NET MVC application.

  1. Add the target HTML element.

    Add an HTML element to be a target of the igPopover.

    For this example procedure, add an HTML input element.

    In HTML:

     <input id=”firstName” type=”text” title=”Please enter your first name” value=””>

  2. Add the igPopover control.

    Add the configuration for Ignite UI for MVC Popover to your ASP.NET MVC View.

    The following code creates an instance of the igPopover control without specifying its options. It targets the input element “firstName” created in step 1.

    In ASPX:

     @(Html.Infragistics().Popover()
         .ID(“firstName”)        
         .Render()
    )

Related Content

Topics

The following topics provide additional information related to this topic.

  • Handling Events (igPopover): This topic explains the events of the igPopover control and provides code examples of attaching event handlers.

  • Configuring igPopover: This topic explains how to configure the content, activation, and positioning of the igPopover control.

  • Styling igPopover: 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.

  • Accessibility Compliance (igPopover): This topic explains the accessibility features of the igPopover control and provides information on how to achieve accessibility compliance for pages containing this control.

  • Known Issues and Limitations (igPopover):This topic provides information about the known issues and limitations of the igPopover control and the available workarounds for them.

  • jQuery and MVC API Links (igPopover): This topic provides links to the API reference documentation for the jQuery and its ASP.NET MVC helper class for the igPopover control.

Samples

The following samples provide additional information related to this topic.

  • Basic Usage: This sample demonstrates the basic initialization scenarios (on a single target element and on multiple target elements) of igPopover in JavaScript.

  • ASP.NET MVC Basic Usage: This sample demonstrates the igPopover control in an ASP.NET MVC scenario. The control is initialized in the View using chaining syntax.

View on GitHub