Ignite UI™ API Documentation

ui.igPopover

Overview
Options
Events
Methods
Theming

The igPopover adds tooltip like functionality to the browser.

Further information regarding the classes, options, events, methods and themes of this API are available under the associated tabs above.

The following code snippet demonstrates how to initialize the igPopover control on an igDateEditor control.

For details on how to reference the required scripts and themes for the igPopover control read Using JavaScript Resources in Ignite UI and Styling and Theming Ignite UI.

Code Sample

 
<!doctype html>
<html>
<head>
    <!-- Infragistics Combined CSS -->
    <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" type="text/css" />
    <link href="css/structure/infragistics.css" rel="stylesheet" type="text/css" />
    <!-- jQuery Core -->
    <script src="js/jquery.js" type="text/javascript"></script>
    <!-- jQuery UI -->
    <script src="js/jquery-ui.js" type="text/javascript"></script>
    <!-- Infragistics Combined Scripts -->
    <script src="js/infragistics.core.js" type="text/javascript"></script>
    <script src="js/infragistics.lob.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#dateEditor").igDateEditor();
            $("#dateEditor").igPopover({
                direction: "right",
                position: "start",
                headerTemplate {
                  closeButton: true
                },
                closeOnBlur: true,
                animationDuration: 150,
                maxHeight: null,
                maxWidth: 170,
                showOn: "focus"
            });
        });
    </script>
</head>
<body>
    <input id="dateEditor" type="date" title="Please enter your birthdate in format dd/MM/yyyy" />
</body>
</html>

Related Samples

Basic Popover

Dependencies

jquery-1.9.1.js

jquery.ui.core.js

jquery.ui.widget.js

infragistics.util.js

infragistics.util.jquery.js

infragistics.ui.widget.js

Inherits

jQuery.widget

Show Details

animationDuration

Type:: number
Default:: 150

Sets the time popover fades in and out when showing/hiding.

Code Sample

 
				//Initialize
				$(".selector").igPopover({
					animationDuration:200
				});

				// Get
				var animationDuration = $(".selector").igPopover("option", "animationDuration");

				// Set
				$(".selector").igPopover("option", "animationDuration", 100);

appendTo

Type:

enumeration

Default:

body
Controls where the popover DOM should be attached to.
Members
- string
- Type:string
- A valid jQuery selector for the element.
- object
- Type:object
- A reference to the parent jQuery object.
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						appendTo: $(".jquerySelector")
					});
				 
```

closeOnBlur

Type:: bool
Default:: true

Controls whether the popover will close on blur or not.

Code Sample

 
				//Initialize
				$(".selector").igPopover({
					closeOnBlur:false
				});

				//Get
				var closeOnBlur = $(".selector").igPopover("option", "closeOnBlur");

containment

Type:: object
Default:: null

Sets the containment for the popover. Accepts a jQuery object.

Code Sample

 
				//Initialize
				$(".selector").igPopover({
					containment:$('#popoverDivElement')
				});

				//Get
				var containment = $(".selector").igPopover("option", "containment");

				// Set
				$(".selector").igPopover("option", "containment", $('#popoverTooltip' ));

contentTemplate

Type:: enumeration
Default:: null

sets the content for the popover container. If left null the content will be get from the target.

Members

string
Type:string
String content of the popover container.
function
Type:function
Function which is a callback that should return the content. Use the 'this' value to access the target DOM element.

Code Sample

 
					//Initialize
					//callback function
						$(".selector").igPopover({
							contentTemplate:function()
								{
								var imgTemplate = "<img class='map' alt='${value}' src='http://maps.google.com/maps/api/staticmap?zoom=10&size=250x250&maptype=terrain&sensor=false&center=${value}'>";
								var data = [{ value: $( this )[0].value }];
								return $.ig.tmpl( imgTemplate, data );
								}
						});
					//string content for the popover container
					$(".selector").igPopover({
						contentTemplate:"<img src='http://www.infragistics.com/assets/images/logo.png' title='IG logo' />"
						});
					//Set
					//Accepts setting the value only if string type is passed
						$(".selector").igPopover("option", "contentTemplate", "<img src='http://www.infragistics.com/assets/images/logo.png' title='IG logo' />");
					//Get
					var contentFunction = $(".selector").igPopover("option", "contentTemplate");

direction

Type:

enumeration

Default:

auto
controls the direction in which the control shows relative to the target element.
Members
- auto
- Type:string
- lets the control show on the side where enough space is available with the priority specified by the directionPriority property.
- left
- Type:string
- shows popover on the left side of the target element.
- right
- Type:string
- shows popover on the right side of the target element.
- top
- Type:string
- shows popover on the top of the target element.
- bottom
- Type:string
- shows popover on the bottom of the target element.
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						direction:"right"
					});
					//Get
					var direction = $(".selector").igPopover("option", "direction");
					//Set
					$(".selector").igPopover("option", "direction", "top");
				 
```

directionPriority

Type:: array
Default:: []
Elements Type:: string

Controls the priority in which the control searches for space to show relative to the target element.
This property has effect only if the direction property value is "auto" or unset.

Code Sample

 
					//Initialize
					$(".selector").igPopover({
						directionPriority:[ "top", "bottom", "left", "right" ]
					});

					//Get
					var position = $(".selector").igPopover("option", "directionPriority");

					//Set
					$(".selector").igPopover("option", "directionPriority",[ "left", "top", "bottom", "right" ]);

headerTemplate

Type:: object
Default:: {}

Sets the content for the popover header.

Code Sample

 
				//Initialize
				$(".selector").igPopover({
					headerTemplate: {
						closeButton:true,
						title :"The title of the popover"
					}
				});

				//Get
				var headerTemplate = $(".selector").igPopover("option", "headerTemplate");

closeButton

Type:: bool
Default:: false

Controls whether the popover renders a functional close button.

Code Sample

 
          //Initialize
		    $(".selector").igPopover({
            headerTemplate {
              closeButton: true
            }
		    });
		 
		      // Get
		  var closeButton = $(".selector").igPopover("option", "headerTemplate");

title

Type:: string
Default:: null

Sets the content for the popover header.

Code Sample

 
       //Initialize
        $(".selector").igPopover({
          headerTemplate {
            title : "The title of the popover"
          }
		    });
      
      // Get
		  var title = $(".selector").igPopover("option", "headerTemplate");

height

Type:

enumeration

Default:

null
defines height for the popover. leave null for auto.
Members
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						height:200
					});
					// Get
					var height = $(".selector").igPopover("option", "height");
				 
```

language
Inherited

Type:: string
Default:: "en"

Set/Get the locale language setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igPopover({
					language: "ja"
				});

				// Get
				var language = $(".selector").igPopover("option", "language");

				// Set
				$(".selector").igPopover("option", "language", "ja");

locale
Inherited

Type:: object
Default:: null

Set/Get the locale setting for the widget.

Code Sample

 
					//Initialize
				$(".selector").igPopover({
					locale: {}
				});

				// Get
				var locale = $(".selector").igPopover("option", "locale");

				// Set
				$(".selector").igPopover("option", "locale", {});

maxHeight

Type:

enumeration

Default:

200
defines height the popover won't exceed even if no specific one is set.
Members
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						maxHeight:"300px"
					});
					// Get
					var maxHeight = $(".selector").igPopover("option", "maxHeight");
				 
```
maxWidth

Type:

enumeration

Default:

200
defines width the popover won't exceed even if no specific one is set.
Members
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						maxWidth:"300px"
					});
					//Get
					var maxWidth = $(".selector").igPopover("option", "maxWidth");
				 
```
minWidth

Type:

enumeration

Default:

60
defines width the popover won't go under the value even if no specific one is set.
Members
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						minWidth:"70px"
					});
					// Get
					var minWidth = $(".selector").igPopover("option", "minWidth");
				 
```
position

Type:

enumeration

Default:

auto
controls the position of the popover according to the target element in case the popover is larger than the target on the side we want to position, if the popover is smaller it should always be in the middle of the visible area.
Members
- auto
- Type:string
- lets the control choose a position depending on available space with the following priority balanced > end > start.
- balanced
- Type:string
- the popover is positioned at the middle of the target element.
- start
- Type:string
- the popover is positioned at the beginning of the target element.
- end
- Type:string
- the popover is positioned at the end of the target element.
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						position:"balanced"
					});
					//Get
					var position = $(".selector").igPopover("option", "position");
					//Set
					$(".selector").igPopover("option", "position", "start");
				 
```

regional
Inherited

Type:: enumeration
Default:: en-US

Set/Get the regional setting for the widget.

Code Sample

 
				//Initialize
				$(".selector").igPopover({
					regional: "ja"
				});
				// Get
				var regional = $(".selector").igPopover("option", "regional");
				// Set
				$(".selector").igPopover("option", "regional", "ja");

selectors

Type:

string

Default:

null
Selectors indicating which items should show popovers. The predefined value is [title]. Customize if you're using something other then the title attribute for the popover content, or if you need a different selector for event delegation. When changing this option, you likely need to also change the contentTemplate option.
Code Sample
```
 
				/Initialize
				$(".selector").igPopover({
					selectors:"[value],a"  // elements which have attribute 'value' and the hyperlinks (anchor elements)
				});

				//Get
				var selectors = $(".selector").igPopover("option", "selectors");
			 
```
showOn

Type:

enumeration

Default:

mouseenter
sets the event on which the popover will be shown. Predefined values are "mouseenter", "click" and "focus".
Members
- mouseenter
- Type:string
- the popover is shown on mouse enter in the target element.
- click
- Type:string
- the popover is shown on click on the target element.
- focus
- Type:string
- the popover is shown on focusing the target element.
Code Sample
```
 
				//Initialize
				$(".selector").igPopover({
					showOn:"focus"
				});
				//Get
				var showOn = $(".selector").igPopover("option", "showOn");
			 
```
width

Type:

enumeration

Default:

null
defines width for the popover. leave null for auto.
Members
Code Sample
```
 
					//Initialize
					$(".selector").igPopover({
						width:300
					});
					//Get
					var width = $(".selector").igPopover("option", "width");
				 
```

For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.

Note: Calling API methods programmatically does not raise events related to their operation unless specifically stated otherwise by the corresponding API documentation; those events are only raised by their respective user interaction.

Show Details

hidden

Cancellable:: false

Event fired after popover is hidden.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

 
			//Bind after initialization
				$(document).on("igpopoverhidden", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					//reference to the igPopover widget.
					ui.owner;

					//reference the element the popover hid for.
					ui.element;

					// reference the current content displayed in the popover as a string.
					ui.content;

					//reference the popover element hidden.
					ui.popover;
				});

				//Initialize
				$(".selector").igPopover({
					hidden: function (evt, ui) {
						...
					}
				});

hiding

Cancellable:: true

Event fired before popover is hidden.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

 
				//Bind after initialization
				(document).on("igpopoverhiding", ".selector", function (evt, ui) {
				//return the triggered event
				evt;

				//reference to the igPopover widget.
				ui.owner;

				//reference the element the popover will hide for.
				ui.element;

				//reference the current content in the popover as a string.
				ui.content;

				//reference the popover element hiding.
				ui.popover;
				);

				/Initialize
				(".selector").igPopover({
					hiding: function (evt, ui) {
						...
					}
				});

showing

Cancellable:: true

Event fired before popover is shown.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

 
			//Bind after initialization
				$(document).on("igpopovershowing", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					//reference to the igPopover widget.
					ui.owner;

					//reference the element the popover will show for.
					ui.element;

					//reference the current content to be shown as a string.
					ui.content;

					//reference the popover element showing.
					ui.popover;
				});

				//Initialize
				$(".selector").igPopover({
					showing: function (evt, ui) {
						...
					}
				});

shown

Cancellable:: false

Event fired after popover is shown.

evt
Type: Event

JQuery event object.
ui
Type: Object

Code Sample

 
				//Bind after initialization
				$(document).on("igpopovershown", ".selector", function (evt, ui) {
					//return the triggered event
					evt;

					//reference to the igPopover widget.
					ui.owner;

					// reference the element the popover showed for.
					ui.element;

					//reference the content that was shown as a string.
					ui.content;

					// reference the popover element shown.
					ui.popover;
				});

				//Initialize
				$(".selector").igPopover({
					shown: function (evt, ui) {
						...
				}
				});

Show Details

changeGlobalLanguage
Inherited

.igPopover( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
```
 
				$(".selector").igPopover("changeGlobalLanguage");
			 
```
changeGlobalRegional
Inherited

.igPopover( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
```
 
				$(".selector").igPopover("changeGlobalRegional");
			 
```
changeLocale
Inherited

.igPopover( "changeLocale", $container:object );
Changes the all locales contained into a specified container to the language specified in options.language
Note that this method is for rare scenarios, use language or locale option setter.
- $container
- Type:object
- Optional parameter - if not set it would use the element of the widget as $container.
Code Sample
```
 
				$(".selector").igPopover("changeLocale");
			 
```
container

.igPopover( "container" );

Return Type:

object
Returns the container for the popover contents.
Code Sample
```
 
				$( ".selector" ).igPopover( "container" );
			 
```
destroy

.igPopover( "destroy" );
Destroys the popover widget.
Code Sample
```
 
				$( ".selector" ).igPopover( "destroy" );
			 
```
getContent

.igPopover( "getContent" );

Return Type:

string

Return Type Description:

The popover content.
Gets the currently set content for the popover container.
Code Sample
```
 
				var currentContent = $( ".selector" ).igPopover( "getContent" );
			 
```
getCoordinates

.igPopover( "getCoordinates" );

Return Type:

object

Return Type Description:

The popover coordinates in pixels.
Gets the current coordinates of the popover.
Code Sample
```
 
				var coordinates =  $( ".selector" ).igPopover( "getCoordinates" );
			 
```
hide

.igPopover( "hide" );
Hides the popover for the specified target.
Code Sample
```
 
				$(".selector").igPopover( "hide" );
			 
```
id

.igPopover( "id" );

Return Type:

string
Returns the ID of the element the popover is attached to.
Code Sample
```
 
				var popoverID = $( ".selector" ).igPopover( "id" );

			 
```
setContent

.igPopover( "setContent", newCnt:string );
Sets the content for the popover container.
- newCnt
- Type:string
- The popover content to set.
Code Sample
```
 
				$( ".selector" ).igPopover("setContent", "New Content To be Set");
			 
```
setCoordinates

.igPopover( "setCoordinates", pos:object );
Sets the popover to specific coordinates.
- pos
- Type:object
- The popover coordinates in pixels.
Code Sample
```
 
				var position = {top: 300, left: 450};
				$( ".selector" ).igPopover( "setCoordinates" , position);
			 
```

show

.igPopover( "show", [trg:domelement], [content:string] );

Shows the popover for the specified target.

trg
Type:domelement
Optional
The element to show popover for.
content
Type:string
Optional
The string to set for the popover to show.

Code Sample

 
				//show the popover for the target it has been initialized before
				$(".selector").igPopover( "show" );

				//show the popover for a new target and with s new content to be displayed
				$(".selector").igPopover("show", $( "#popover_target" ),"Content to be displayed in the popover");

target

.igPopover( "target" );

Return Type:

object

Return Type Description:

The current target.
Gets the popover current target.
Code Sample
```
 
				var target =  $( ".selector" ).igPopover( "target" );
			 
```

ui-igpopover-arrow ui-igpopover-arrow-

Classes applied to the popover arrow (like ui-igpopover-arrow-top, ui-igpopover-arrow-left, etc).
ui-widget ui-igpopover

Classes applied to the main popover container.
ui-icon ui-icon-closethick ui-igpopover-close-button

Classes applied to the close button.
ui-igpopover-title

Classes applied to the title container(if title is defined in options).

Ignite UI | Samples

ui.igPopover

Code Sample

Related Samples

Dependencies

Inherits

animationDuration

Code Sample

appendTo

Members

Code Sample

closeOnBlur

Code Sample

containment

Code Sample

contentTemplate

Members

Code Sample

direction

Members

Code Sample

directionPriority

Code Sample

headerTemplate

Code Sample

closeButton

Code Sample

title

Code Sample

height

Members

Code Sample

languageInherited

Code Sample

localeInherited

Code Sample

maxHeight

Members

Code Sample

maxWidth

Members

Code Sample

minWidth

Members

Code Sample

position

Members

Code Sample

regionalInherited

Code Sample

selectors

Code Sample

showOn

Members

Code Sample

width

Members

Code Sample

hidden

Code Sample

hiding

Code Sample

showing

Code Sample

shown

Code Sample

changeGlobalLanguageInherited

Code Sample

changeGlobalRegionalInherited

Code Sample

changeLocaleInherited

Code Sample

container

Code Sample

destroy

Code Sample

getContent

Code Sample

getCoordinates

Code Sample

language
Inherited

locale
Inherited

regional
Inherited

changeGlobalLanguage
Inherited

changeGlobalRegional
Inherited

changeLocale
Inherited