Available in the OSS Version

Popover - Basic Use

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

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/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2024.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/2024.2/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2024.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>