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>

<div id="containment">
  <input id="right" placeholder="Focus me to show popover to the right"/>
  <input id="left" placeholder="Focus me to show popover to the left" />
  
</div>

CSS

#containment {
            background-color: bisque;
            width: 500px;
            height: 400px;
            margin: 50px 0 0 100px;
            display: flex;
            flex-flow: column;
            align-items: center;
            justify-content: center;
        }

        input {
            width: 250px;
        }

JavaScript

$(function () {
  $("#left").igPopover({
    containment: $('#containment'),
    direction: "left",
    position: "end",
    height: 100,
    width: 300,
    showOn: 'focus',
    closeOnBlur: true
  });
  $("#right").igPopover({
    containment: $('#containment'),
    direction: "right",
    position: "end",
    height: 100,
    width: 100,
    showOn: 'focus',
    closeOnBlur: true
  });
});