Available in the OSS Version
Popover - Basic Use
This sample demonstrates a popover on a single target element and on multiple target elements.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
Infragistics social networks
Bing maps input viewer
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
These are the basic initialization scenarios of the popover control in JavaScript. To see the popover control in action, click on the Infragistics logo or focus on any of the input fields.
Code View
Copy to Clipboard
<!DOCTYPE html>
<html>
<head>
<title></title>
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="http://cdn-na.infragistics.com/igniteui/2023.2/latest/css/structure/infragistics.css" rel="stylesheet" />
<script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/2023.2/latest/js/infragistics.lob.js"></script>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='/images/samples/popover/facebook.jpg' />
<span class="spanText">Join us on Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='/images/samples/popover/twitter.jpg' />
<span class="spanText">Follow us on Twitter</span>
</a>
</li>
<li>
<a href="http://www.youtube.com/user/infragistics" target="_blank">
<img src='/images/samples/popover/youtube.jpg' />
<span class="spanText">Watch our YouTube channel</span>
</a>
</li>
</ul>
</script>
</head>
<body>
<script src="/js/map-helper.js" type="text/javascript"></script>
<style type="text/css">
.ui-igpopover > .ui-widget-content {
padding: 5px;
}
.mapsInput {
width: 200px;
}
.spanText {
margin-left: 5px;
font-family: "Segoe UI", Arial, sans-serif;
outline: none;
font-size: 1.1em;
}
</style>
<h4>Infragistics social networks</h4>
<img id="IGlogo" src='/images/samples/popover/IGLogo.jpg'/>
<br />
<br />
<h4>Bing maps input viewer</h4>
<br />
<div id="popoverTooltip">
<input class="mapsInput" title="Sofia, Bulgaria" value="Sofia, Bulgaria" />
<br />
<input class="mapsInput" title="Cranbury, USA" value="Cranbury, USA" />
<br />
<input class="mapsInput" title="Montevideo, Uruguay" value="Montevideo, Uruguay" />
<br />
<input class="mapsInput" title="Southbank, Australia" value="Southbank, Australia" />
<br />
<input class="mapsInput" title="Tokyo, Japan" value="Tokyo, Japan" />
<br />
<input class="mapsInput" title="Uxbridge, United Kingdom" value="Uxbridge, United Kingdom" />
<br />
</div>
<script type="text/javascript">
$( function ()
{
$( '#IGlogo' ).igPopover( {
direction: "right",
position: "start",
closeOnBlur: false,
animationDuration: 150,
maxHeight: null,
maxWidth: null,
contentTemplate: $( '#contactUs-template' ).html(),
headerTemplate: {
closeButton: true,
title: "We're social"
},
showOn: "click"
} );
var popOver = $( '#popoverTooltip' ).igPopover( {
direction: "right",
position: "start",
headerTemplate: {
closeButton: true,
title: 'To display the location of the city is used Bing maps'
},
closeOnBlur: false,
animationDuration: 0,
maxHeight: null,
maxWidth: 250,
contentTemplate: contentFunction,
selectors: "[title]",
showOn: "focus"
} );
} );
function contentFunction()
{
var location = $(this)[0].value ? $(this)[0].value : "Sofia,Bulgaria";
var imgTemplate = "<img class='map' alt='${value}' src='https://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/${value}?mapSize=250,250&format=jpeg&key=${bingKey}'>";
var data = [{ value: location, bingKey: mapHelper.bingData() }];
return $.ig.tmpl(imgTemplate, data);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
</head>
<body>
<script src="/js/map-helper.js" type="text/javascript"></script>
<my-app>Loading...</my-app>
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- IE required polyfills, in this exact order -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.35.0/es6-shim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.20/system-polyfills.js"></script>
<script src="https://unpkg.com/angular2/es6/dev/src/testing/shims_for_IE.js"></script>
<script src="https://unpkg.com/zone.js@0.6.23?main=browser"></script>
<script src="https://unpkg.com/typescript@2.0.2/lib/typescript.js"></script>
<script src="https://unpkg.com/reflect-metadata@0.1.3"></script>
<script src="https://unpkg.com/systemjs@0.19.27/dist/system.src.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<style type="text/css">
.ui-igpopover > .ui-widget-content {
padding: 5px;
}
.mapsInput {
width: 200px;
}
.spanText {
margin-left: 5px;
font-family: "Segoe UI", Arial, sans-serif;
outline: none;
font-size: 1.1em;
}
</style>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='/images/samples/popover/facebook.jpg' />
<span class="spanText">Join us on Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='/images/samples/popover/twitter.jpg' />
<span class="spanText">Follow us on Twitter</span>
</a>
</li>
<li>
<a href="http://www.youtube.com/user/infragistics" target="_blank">
<img src='/images/samples/popover/youtube.jpg' />
<span class="spanText">Watch our YouTube channel</span>
</a>
</li>
</ul>
</script>
<script>
System.config({
paths: {
'npm:': 'https://unpkg.com/'
},
map: {
'@angular/core': 'npm:@angular/core/bundles/core.umd.js',
'@angular/common': 'npm:@angular/common/bundles/common.umd.js',
'@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
'@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
'@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'@angular/http': 'npm:@angular/http/bundles/http.umd.js',
'@angular/router': 'npm:@angular/router/bundles/router.umd.js',
'@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
'igniteui-angular-wrappers': 'npm:igniteui-angular-wrappers',
'rxjs': 'npm:rxjs'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
rxjs: {
defaultExtension: 'js'
},
'igniteui-angular-wrappers': {
main: './index.js',
defaultExtension: 'js'
}
},
transpiler: 'typescript',
typescriptOptions: { emitDecoratorMetadata: true }
});
System.import('basic-popover.ts').then(null, console.error.bind(console));
</script>
</body>
</html>
import { Component, NgModule } from '@angular/core';
import { IgPopoverComponent } from 'igniteui-angular-wrappers';
import { BrowserModule } from '@angular/platform-browser';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
declare var jQuery: any;
declare var mapHelper;
@Component({
selector: 'my-app',
template: `<h4>Infragistics social networks</h4>
<ig-popover id="IGlogoTooltip" widgetId="IGlogoTooltip" [options]="popoverOptions1">
<img id="IGlogo" src='/images/samples/popover/IGLogo.jpg' />
</ig-popover>
<br />
<br />
<h4>Bing maps input viewer</h4>
<br />
<ig-popover widgetId="popoverTooltip" id="popoverTooltip" [options]="popoverOptions2">
<input class="mapsInput" title="Sofia, Bulgaria" value="Sofia, Bulgaria" />
<br />
<input class="mapsInput" title="Cranbury, USA" value="Cranbury, USA" />
<br />
<input class="mapsInput" title="Montevideo, Uruguay" value="Montevideo, Uruguay" />
<br />
<input class="mapsInput" title="Southbank, Australia" value="Southbank, Australia" />
<br />
<input class="mapsInput" title="Tokyo, Japan" value="Tokyo, Japan" />
<br />
<input class="mapsInput" title="Uxbridge, United Kingdom" value="Uxbridge, United Kingdom" />
<br />
</ig-popover>`
})
export class AppComponent {
private popoverOptions1: IgPopover;
private popoverOptions2: IgPopover;
constructor() {
this.popoverOptions1 = {
direction: "right",
position: "start",
closeOnBlur: false,
animationDuration: 150,
maxHeight: null,
maxWidth: null,
selectors: "#IGlogo",
contentTemplate: function () {
return jQuery('#contactUs-template').html()
},
headerTemplate: {
closeButton: true,
title: "We're social"
},
showOn: "click"
}
this.popoverOptions2 = {
direction: "right",
position: "start",
headerTemplate: {
closeButton: true,
title: 'To display the location of the city is used Bing maps'
},
closeOnBlur: false,
animationDuration: 0,
maxHeight: null,
maxWidth: 250,
contentTemplate: function () {
var location = $(this)[0].value ? $(this)[0].value : "Cranbury, USA";
var imgTemplate = "<img class='map' alt='${value}' src='https://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/${value}?mapSize=250,250&format=jpeg&key=${bingKey}'>";
var data = [{ value: location, bingKey: mapHelper.bingData() }];
return $.ig.tmpl(imgTemplate, data);
},
selectors: "[title]",
showOn: "focus"
}
}
}
@NgModule({
imports: [BrowserModule],
declarations: [AppComponent, IgPopoverComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
platformBrowserDynamic().bootstrapModule(AppModule);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Ignite UI for jQuery Required Combined CSS Files -->
<link href="/igniteui/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
<link href="/igniteui/css/structure/infragistics.css" rel="stylesheet" />
<!-- 1. Load libraries -->
<script src="/js/modernizr.min.js"></script>
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery-ui.min.js"></script>
<!-- ReactJS library -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.16/browser.js"></script>
<!-- Ignite UI for jQuery Required Combined JavaScript Files -->
<script src="/igniteui/js/infragistics.core.js"></script>
<script src="/igniteui/js/infragistics.lob.js"></script>
<script src="/js-data/nw-products"></script>
<!-- Ignite UI for jQuery ReactJS Files -->
<script src="https://unpkg.com/igniteui-react@1.0.1/igniteui-react.js"></script>
<script id="contactUs-template" type="text/html">
<ul>
<li>
<a href="http://www.facebook.com/infragistics" target="_blank">
<img src='/images/samples/popover/facebook.jpg' />
<span class="spanText">Join us on Facebook</span>
</a>
</li>
<li>
<a href="http://twitter.com/infragistics" target="_blank">
<img src='/images/samples/popover/twitter.jpg' />
<span class="spanText">Follow us on Twitter</span>
</a>
</li>
<li>
<a href="http://www.youtube.com/user/infragistics" target="_blank">
<img src='/images/samples/popover/youtube.jpg' />
<span class="spanText">Watch our YouTube channel</span>
</a>
</li>
</ul>
</script>
</head>
<body>
<script src="/js/map-helper.js" type="text/javascript"></script>
<style type="text/css">
.ui-igpopover > .ui-widget-content {
padding: 5px;
}
.mapsInput {
width: 200px;
}
.spanText {
margin-left: 5px;
font-family: "Segoe UI", Arial, sans-serif;
outline: none;
font-size: 1.1em;
}
</style>
<div id="app">
<!--Sample JSON Data-->
<script type="text/babel">
var App = React.createClass({
render: function () {
function contentFunction () {
var location = $(this)[0].value ? $(this)[0].value : "Sofia,Bulgaria";
var imgTemplate = "
<img class='map' alt='${value}' src='https://dev.virtualearth.net/REST/V1/Imagery/Map/AerialWithLabels/${value}?mapSize=250,250&format=jpeg&key=${bingKey}'>";
var data = [{ value: location, bingKey: mapHelper.bingData() }];
return $.ig.tmpl( imgTemplate, data );
}
return
<div>
<h4>Infragistics social networks</h4>
<IgPopover id="IGlogoPopover"
direction="right"
position="start"
closeOnBlur={false}
animationDuration={150}
maxHeight={null}
maxWidth={null}
selectors="#IGlogo"
contentTemplate={$( '#contactUs-template' ).html()}
headerTemplate={{
closeButton: true,
title: "We're social"
}}
showOn="click">
<img id="IGlogo" src='/images/samples/popover/IGLogo.jpg'/>
</IgPopover>
<br />
<br />
<h4>Bing maps input viewer</h4>
<br />
<IgPopover id="popoverTooltip"
direction="right"
position="start"
headerTemplate={{
closeButton: true,
title: 'To display the location of the city is used Bing maps'
}}
closeOnBlur={false}
animationDuration={0}
maxHeight={null}
maxWidth={250}
contentTemplate={contentFunction}
selectors="[title]"
showOn="focus">
<input className="mapsInput" title="Sofia, Bulgaria" defaultValue="Sofia, Bulgaria"/>
<br />
<input className="mapsInput" title="Cranbury, USA" defaultValue="Cranbury, USA" />
<br />
<input className="mapsInput" title="Montevideo, Uruguay" defaultValue="Montevideo, Uruguay" />
<br />
<input className="mapsInput" title="Southbank, Australia" defaultValue="Southbank, Australia" />
<br />
<input className="mapsInput" title="Tokyo, Japan" defaultValue="Tokyo, Japan" />
<br />
<input className="mapsInput" title="Uxbridge, United Kingdom" defaultValue="Uxbridge, United Kingdom" />
<br />
</IgPopover>
</div>
}
});
ReactDOM.render(
<App />,
document.getElementById("app"));
</script>
</div>
</body>
</html>