Custom Popover Using Jquery

Bron Technology

2020-04-24

create popover using jquery is used to display the little content in a tooltip-style popup box . Popovers are also known as advanced tooltips.

You can Use the tooltip when if your content is short if not use popover which increase the efficiency of the content.

Now in this We make Popover Which have these fucntionality as given Below:

Popover will closed when you click outside any where.
When you click one popover another popover will closed automatically.
You can pass link in popover.
One close sign by which user can close the popover.

Now We will start with coding part:

Table of Contents

Popover.html

Popover Using Jquery

<!DOCTYPE html>
<html>
<head>
 <title>inner outer click</title>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 <style type="text/css">
  .popover {
   background-color: #e45;
   border-radius: 2px;
  }
  button {
   cursor: pointer;
  }
  .pop {
    left: 86px;
    right: 0;
    top: 0px;
    position: absolute;
    width: 300px;
     
    padding: 10px;
}
.popover-header {
    padding: .5rem .75rem;
    margin-bottom: 0;
    font-size: 1rem;
    color: inherit;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-top-left-radius: calc(.3rem - 1px);
    border-top-right-radius: calc(.3rem - 1px);
}
#alert {
    font-size: 25px;
    float: right;
    margin-top: -8px;
}
.popover-body {
    padding: .5rem .75rem;
    }
    .arrow {
    left: calc((.5rem + 1px) * -1);
    width: .5rem;
    height: 1rem;
    margin: .3rem 0;
}
.popover-body p{
 color: #fff;
}
.popover .arrow {
    position: absolute;
    display: block;}
 </style>
</head>
<body>

 
 <div id="B1"><button>Button 1</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
     </div>   
 <br><br>
 <div id="B2"><button>Button 2</button
  ><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">New Popover <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
     </div>   
 <br><br>
 <div id="B3"><button>Button 3</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
     </div>   
 <br><br>
 <div id="B4"><button>Button 4</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">New Popover<a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
    </div>
</div>
 <br><br>
 <div id="B5"><button>Button 5</button><div class="popover pop fade bs-popover-right show" style="display: block;">
            <h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>
             <div class="popover-body">
              <p>Popover is closed when you click outside and When you click one popover another popover will closed automatically.You can pass link in popover Also.Popover is designed by Developers Guidance </p>
               <p> <a href="#" class="btn new float-right"> Read More </a></p>
              </div>
        </div>
      </div>

 <br><br>
 <div id="show"></div>
</body>
</html>

100

101

102

103

104

105

106

107

108

<!DOCTYPE html>

<html>

<head>

<title>inner outer click</title>

.popover {

background-color: #e45;

border-radius: 2px;

}

button {

cursor: pointer;

}

.pop {

left: 86px;

right: 0;

top: 0px;

position: absolute;

width: 300px;

padding: 10px;

}

.popover-header {

padding: .5rem .75rem;

margin-bottom: 0;

font-size: 1rem;

color: inherit;

background-color: #f7f7f7;

border-bottom: 1px solid #ebebeb;

border-top-left-radius: calc(.3rem - 1px);

border-top-right-radius: calc(.3rem - 1px);

}

#alert {

font-size: 25px;

float: right;

margin-top: -8px;

}

.popover-body {

padding: .5rem .75rem;

}

.arrow {

left: calc((.5rem + 1px) * -1);

width: .5rem;

height: 1rem;

margin: .3rem 0;

}

.popover-body p{

color: #fff;

}

.popover .arrow {

position: absolute;

display: block;}

</style>

</head>

<body>

<div id="B1"><button>Button 1</button><div class="popover pop fade bs-popover-right show" style="display: block;">

<h3 class="popover-header">Developers Guidance <a href="#" class="pophide" id="alert" data-dismiss="alert">×</a></h3>