Ignite UI API Reference

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

 
		//Initialize
		$(".selector").igPopover({
			animationDuration: 200
		});
		 
		// Get
		var animationDuration = $(".selector").igPopover("option", "animationDuration");
		
		// Set
		$(".selector").igPopover("option", "animationDuration", 100);
	  

Controls whether the popover will close on blur or not.

 
		//Initialize
		$(".selector").igPopover({
			closeOnBlur: false
		});
		 
		// Get
		var closeOnBlur = $(".selector").igPopover("option", "closeOnBlur");
	  

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

 
		//Initialize
		$(".selector").igPopover({
			containment: $( '#popoverDivElement' )
		});
		 
		// Get
		var containment = $(".selector").igPopover("option", "containment");
		
		// Set
		$(".selector").igPopover("option", "containment", $( '#popoverTooltip' ));
	  

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

 
		//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");
	  

controls the direction in which the control shows relative to the target element.

 
		//Initialize
		$(".selector").igPopover({
			direction: "right"
		});
		 
		// Get
		var direction = $(".selector").igPopover("option", "direction");
		
		// Set
		$(".selector").igPopover("option", "direction", "top");
	  

Sets the content for the popover header.

 
      //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");
            

defines height for the popover. leave null for auto.

 
		//Initialize
		$(".selector").igPopover({
			height: 200
		});
		 
		// Get
		var height = $(".selector").igPopover("option", "height");
	  

defines height the popover won't exceed even if no specific one is set. .

 
		//Initialize
			$(".selector").igPopover({
				maxHeight: "300px"
			});
			 
			// Get
			var maxHeight = $(".selector").igPopover("option", "maxHeight");
	  

defines width the popover won't exceed even if no specific one is set. .

 
			//Initialize
			$(".selector").igPopover({
				maxWidth: "300px"
			});
			 
			// Get
			var maxWidth = $(".selector").igPopover("option", "maxWidth");
	  

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.

		//Initialize
		$(".selector").igPopover({
			position: "balanced"
		});
		 
		// Get
		var position = $(".selector").igPopover("option", "position");
		
		// Set
		$(".selector").igPopover("option", "position", "start");
	  

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.

 
		//Initialize
		$(".selector").igPopover({
			  selectors: "[value],a"  // elements which have attribute 'value' and the hyperlinks (anchor elements)
		});
		 
		// Get
		var selectors = $(".selector").igPopover("option", "selectors");
	  

defines width for the popover. leave null for auto. .

 
		//Initialize
		$(".selector").igPopover({
			width: 300
		});
		 
		// Get
		var width = $(".selector").igPopover("option", "width");