popovers using DOM

testing before moving logic to site code

HTML

<head>
    <!--<link rel="stylesheet" href="http://localhost/lundylight/img/points/icons/my-map-icons/style.css">-->
    <link rel="stylesheet" href="https://cdn.materialdesignicons.com/3.6.95/css/materialdesignicons.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</head>
<body> <!-- popover will be dynamically generated here --> </body>

CSS

:root {
  --popoverBgd: #5f6976;
  --accentColour: #04a0b2;
} /* to change property value: root.style.setProperty('--accentColour', '#88d8b0') */

body {
  background-color: lightblue; /* Testing the Stylesheet is active */
}

.popover-block-container {
  font-size: 100%;
}

.popover-block-container .popover-icon {
  background: none;
  color: none;
  border: none;
  padding: 0;
  outline: none;
  cursor: pointer;
}

.popover-block-container .popover-icon i {
  color: var(--accentColour);
  font-size: 2em;
  text-align: center;
  margin-top: 4px;
}

.popover-header {
  display: none;
}

.popover {
  max-width: 550px;
  min-width: 450px;
  border-radius: 6px;
  border: none;
  box-shadow: 0 0 6px 1px #eee;
}

.popover-body {
  border: none;
  padding: 20px 49.4px 24px 24px;
  color: var(--popoverBgd);
  font-style: italic;
  z-index: 2;
  line-height: 1.53;
  letter-spacing: 0.1px;
}

.popover-body .popover-close {
  position: absolute;
  top: 5px;
  right: 10px;
  opacity: 1;
}

.popover-body .popover-close i {
  font-size: 0.8em;
  font-weight: bold;
  color: var(--accentColour);
}

.popover-body .popover-content-wrapper {
    padding-top: 21px;
    padding-left: 8px;
    width: inherit;
}

.popover-body .popover-content-wrapper img {
    position: relative;
    float: right;
    max-width: 60%;
    height: auto;
    padding: 8px 0 8px 8px;
}

.popover-body .popover-content-wrapper .details {
    font-size: 0.87em;
}

.popover-body .popover-content-wrapper .details i {
    font-size: 1.5em;
    margin: 0 8px 0 0;
}

JavaScript

$(document).ready(function (){
$(".popover-icon").popover({
        html: true,
        animation: true,
        placement: "right",
        trigger: 'focus',
        content: function() {
            var content = $(this).attr("data-popover-content");
            return $(content).children(".popover-body").html();
        }
    });
});

var body_tag = document.getElementsByTagName('body')[0];

var div_popoverblockcontainer = document.createElement('div');
div_popoverblockcontainer.className = "popover-block-container";
body_tag.appendChild(div_popoverblockcontainer);

var btn_popovericon = document.createElement('button');
btn_popovericon.rel = "popover";
btn_popovericon.tabindex = "-1";
btn_popovericon.type = "button";
btn_popovericon.className = "popover-icon";
btn_popovericon.setAttribute("data-popover-content","#unique-id"); // WILL CHANGE THIS
div_popoverblockcontainer.appendChild(btn_popovericon);

var i_popovericon = document.createElement('i');
i_popovericon.className = "mdi mdi-map-marker";//"icon-accommodation"; WILL CHANGE THIS
btn_popovericon.appendChild(i_popovericon);

var div_uniqueId = document.createElement('div');
div_uniqueId.id = "unique-id";                     // WILL CHANGE THIS
div_uniqueId.style = "display:none;";
div_popoverblockcontainer.appendChild(div_uniqueId);

var div_popoverbody = document.createElement('div');
div_popoverbody.className = "popover-body";
div_uniqueId.appendChild(div_popoverbody);

var btn_popoverclose = document.createElement('button');
btn_popoverclose.type = "button";
btn_popoverclose.tabindex = "-1";
btn_popoverclose.className = "popover-close close";
div_popoverbody.appendChild(btn_popoverclose);

var i_popoverclose = document.createElement('i');
i_popoverclose.className = "mdi mdi-close";
btn_popoverclose.appendChild(i_popoverclose);

var div_popovercontentwrapper = document.createElement('div');
div_popovercontentwrapper.className =...