JSFiddle - React, Tailwind, and code Playground

by dkamburov

HTML

<script src="http://igniteui.com/js/modernizr.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.core.js"></script>
<script src="http://cdn-na.infragistics.com/igniteui/latest/js/infragistics.lob.js"></script>
<link href="http://cdn-na.infragistics.com/igniteui/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet"></link>
<link href="http://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='http://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='http://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='http://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='http://igniteui.com/images/samples/popover/IGLogo.jpg'></img>
    <br />
    <br />
    <h4>Google maps input viewer</h4>
    <br />
    <div id="popoverTooltip">
      <div>
        <div class="mapsInput">
        asd
        </div>
    </div>
        <input class="mapsInput" title="Sofia,...

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",
                //closeOnBlur: false,
                //animationDuration: 0,
                //maxHeight: null,
                ///maxWidth: 250,
                contentTemplate: contentFunction,
                selectors: ".mapsInput",
                //showOn: "focus"
            } );
        } );

        function contentFunction()
        {
            var imgTemplate = "<img class='map' alt='${value}' src='https://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 );
        }