JSFiddle - React, Tailwind, and code Playground

by Kesavamoorthi Subramanian

HTML

<div id="popupId" class="{{ position }} {{ {show: show} | tokenList }}" style="width: {{ width }}; height: {{ height }};">
      <content select=":not([role='trigger'])"></content>
    </div>
    
    <content id="triggerId" on-click="{{ _toggle }}"></content>

<cat-pop-up id="popupId" position="bottom" style="margin-left:500px;">
    <span id="popupContentId">Hi! I'm a pop-up.<br><cat-button text="OK" id="popupCatButtonId"></cat-button></span>
    
    <cat-button text="Click Me!" role="trigger"></cat-button>
  </cat-pop-up>

CSS

:host {
  box-sizing: border-box;
  position: relative;
  display: inline-block;
  outline: none; }

#popupId {
  position: absolute;
  background-color: #EBEBEB;
  border: 2px solid #FFCC00;
  font-family: "robotoregular";
  font-size: 12px;
  font-weight: bold;
  color: #000000;
  padding: 10px;
  z-index: 9999;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: 2px 2px 8px #282828; }

#popupId:not(.show) {
  visibility: hidden; }

#popupId::after {
  position: absolute;
  content: '';
  height: 0;
  width: 0;
  border: 10px solid transparent; }

.top {
  margin-bottom: 10px;
  bottom: 100%; }

.right {
  margin-left: 10px;
  left: 100%; }

.bottom {
  top: 100%;
  margin-top: 10px; }

.left {
  margin-right: 10px;
  right: 100%; }

#popupId.bottom::after {
  bottom: 100%;
  left: calc(50% - 10px);
  border-bottom-color: #FFCC00; }

#popupId.left::after {
  left: 100%;
  top: calc(50% - 10px);
  border-left-color: #FFCC00; }

#popupId.top::after {
  top: 100%;
  left: calc(50% - 10px);
  border-top-color: #FFCC00; }

#popupId.right::after {
  right: 100%;
  top: calc(50% - 10px);
  border-right-color: #FFCC00; }

JavaScript

console.log('Window: ' + window.innerWidth + 'x' + window.innerHeight);
        console.log('Popup Dimention (Width x Height): ' + this.$.popupId.offsetWidth + 'x' + this.$.popupId.offsetHeight);
        console.log('Popup Position (Left, Top): ' + this.$.popupId.offsetLeft + ',' + this.$.popupId.offsetTop);
        console.log('this Object Dimention (Width x Height): ' + this.offsetWidth + 'x' + this.offsetHeight);
        console.log('this Object Position (Left, Top): ' + this.offsetLeft + ',' + this.offsetTop);
        console.log(this.$.popupId.getBoundingClientRect());

var windowWidth = window.innerWidth;
        var windowHeight =  window.innerHeight;
        
        var triggerWidth = this.offsetWidth;
        var triggerHeight = this.offsetHeight;
        var triggerLeft = this.offsetLeft;
        var triggerTop = this.offsetTop;
        var triggerRight = this.offsetLeft + this.offsetWidth;
        var triggerBottom = this.offsetTop + this.offsetHeight;
        
        var popupWidth = this.$.popupId.offsetWidth;
        var popupHeight = this.$.popupId.offsetHeight;
        var popupLeft = this.$.popupId.offsetLeft;
        var popupTop = this.$.popupId.offsetTop;
        var popupRight = this.$.popupId.offsetLeft + this.$.popupId.offsetWidth;
        var popupBottom = this.$.popupId.offsetTop + this.$.popupId.offsetHeight;


document.addEventListener('polymer-ready', function()
    {
      var popup = document.getElementById('popupId');
      
      var popupContent = document.getElementById('popupContentId');
      
      var popupCatButton = document.getElementById('popupCatButtonId');
      popupCatButton.addEventListener('cat-button-click', function()
      {
        alert('hi');
      });
      
      setTimeout(function()
      {
        //styling elements distributed to content (via ::content) requiresstyling elements distributed to content (via ::content) requiresstyling elements distributed to content (via ::content) requiresstyling...