Available in the OSS Version

Popover - TypeScript

This sample demonstrates a popover on a single target element and on multiple target elements in TypeScript.

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.

The single target popover is shown when you click on the Infragistics logo. The multiple target elements popover is shown when you click on any of the input fields.

Code View

Copy to Clipboard

HTML
TypeScript

                    <!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>

    <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>

</head>
<body>
    <script id="contactUs-template" type="text/html">
        <ul>
            <li>
                <a href="http://www.facebook.com/infragistics" target="_blank">
                    <img src='https://www.igniteui.com/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='https://www.igniteui.com/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='https://www.igniteui.com/images/samples/popover/youtube.jpg' />
                    <span class="spanText">Watch our YouTube channel</span>
                </a>
            </li>
        </ul>
    </script>

    <h4>Infragistics social networks</h4>
    <img id="IGlogo" src='https://www.igniteui.com/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 src="/TypeScriptSamples/popover/typescript.js"></script>
</body>
</html>

             /// <reference path="/js/typings/jquery.d.ts" />
/// <reference path="/js/typings/jqueryui.d.ts" />
/// <reference path="/js/typings/igniteui.d.ts" />

declare var mapHelper;

$(function () {
    function contentFunction() {
        var location = (<HTMLLIElement>$(this)[0]) ? (<HTMLLIElement>$(this)[0]) : "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: (<HTMLLIElement>$(this)[0]).value, bingKey: mapHelper.bingData() }];
        return $.ig.tmpl(imgTemplate, data);
    }

    $('#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"
    });
});