How can i add close icon (x) in static popover?

Question

I have static popover, using bootstrap. I want close icon like (x) on title, this should be close (or erase) this popover. this is static one, i dont know how can i make this.

Waiting your helps, thanks already.

Here is my code:

<style>
.static-popover .popover {
display: block;
}
</style>

<div class="container static-popover">
    <div class="col-md-2">
        <div class="popover bottom">
            <div class="arrow"></div>
            <h3 class="popover-title">Popover</h3>
            <div class="popover-content">
                <p>Here is some content</p>
            </div>
        </div>
    </div>
</div>

Here is my fiddle

https://jsfiddle.net/34tsayyL/

Answer 1

create span element with absolute position then add listener element.remove() to remove target element.

.static-popover .popover {
  display: block;
}

.close {
  position: absolute;
  right: 10px;
  top: 5px;
}

<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script type="text/javascript" src="//code.jquery.com/jquery-1.12.4.min.js"></script>

<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="container static-popover">
  <div class="col-md-2">
    <div class="popover bottom">
      <div class="arrow"></div>
      <h3 class="popover-title">Popover</h3>
      <span class="close" onclick="document.querySelector('.popover').remove()">x</span>
      <div class="popover-content">
        <p>Here is some content</p>
      </div>
    </div>
  </div>
</div>