JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://igniteui.com/js/modernizr.min.js"></script>
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="https://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<script src="https://igniteui.com/js/map-helper.js"></script>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="https://cdn-na.infragistics.com/igniteui/latest/css/structure/infragistics.css" rel="stylesheet"></link>

<script id="contactUs-template" type="text/html">
        <ul>
            <li>
                <a href="http://www.facebook.com/infragistics" target="_blank">
                    <img src='https://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://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://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://igniteui.com/images/samples/popover/IGLogo.jpg'></img>
    <br />
    <br />
    <h4>Bing maps input viewer</h4>
    <br />
    <div id="popoverTooltip">
        <input class="mapsInput" title="Sofia, Bulgaria"...

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

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);
        }