Home / css / Creative PopOver with Tabs using Bootstrap 4 and CSS 3

Creative PopOver with Tabs using Bootstrap 4 and CSS 3

Creative PopOver with Tabs using Bootstrap 4 and CSS 3

Creative PopOvers with Tabs are an integral part of any application which has forms and wherein the user needs to input his or her details. Colorful and creative PopOvers and Tabs enhances the user experience.This PopOver with Tabs is created by Erik using CSS and Boostrap 4.

LIVE DEMO

 CODE

  • HTML
  • Style.css
  • app.js
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
          
        <link href='http://fonts.googleapis.com/css?family=Montserrat:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="style.css" >
       
    </head>
<body>
 
    <div class="container py-5">
        <div class="row">
            
            <div class="col-md-6 col-sm-6 py-5">
                    <div class="col-md-12">
                            <a href="#" rel="popover" data-html="true" data-trigger="focus" data-popover-content="#popoverContent">Click to View PopOver with Tabs</a>
                          
                           <div id="popoverContent" class="hide">
    
                             <ul class="nav nav-tabs" id="myTab" role="tablist">
                              <li class="nav-item">
                                <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
                              </li>
                              <li class="nav-item">
                                <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
                              </li>
                            </ul>
                            <div class="tab-content" id="myTabContent">
                              <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab"><b>Tab-1-</b>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</div>
                              <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab"><b>Tab-2-</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utsd sds </div>
                              <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab"> <b>Tab-3-</b>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </div>
                            </div>
                         </div>

                    </div>
            </div>
            <div class="col-md-6 col-sm-6 py-5">
                    <div class="col-md-12">
                      
                        <a href="#" rel="popover1" data-html="true" data-trigger="focus" data-popover-content="#popoverContent1">Click to View PopOver with Tabs</a>
                      
                       <div id="popoverContent1" class="hide">

                         <ul class="nav nav-tabs" id="myTab1" role="tablist">
                          <li class="nav-item">
                            <a class="nav-link active" id="home-tab1" data-toggle="tab" href="#home1" role="tab" aria-controls="home1" aria-selected="true">Home</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="profile-tab1" data-toggle="tab" href="#profile1" role="tab" aria-controls="profile1" aria-selected="false">Profile</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" id="contact-tab1" data-toggle="tab" href="#contact1" role="tab" aria-controls="contact1" aria-selected="false">Contact</a>
                          </li>
                        </ul>
                        <div class="tab-content" id="myTabContent">
                          <div class="tab-pane fade show active" id="home1" role="tabpanel" aria-labelledby="home1-tab"><b>Tab-1-</b>Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.</div>
                          <div class="tab-pane fade" id="profile1" role="tabpanel" aria-labelledby="profile1-tab"><b>Tab-2-</b>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt utsd sds </div>
                          <div class="tab-pane fade" id="contact1" role="tabpanel" aria-labelledby="contact1-tab"><b>Tab-3-</b>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure </div>
                        </div>
                     </div>

                </div>
                   
          
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
 <script src="app.js"></script>
</body>

   
</html>





 

 

body{
    font-family: 'Montserrat'!important;
    font-size: 15px;
    background-color: #fbfbfb;
}

.hide{
    display: none;
}

.popover{
    box-shadow: 0 2px 5px rgba(0,0,0,.2);
    font-family: 'Montserrat'!important;
    border-radius: 3px;
    border-width: 1.2px;
    -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    -moz-box-shadow: 0 2px 10px rgba(0,0,0,.2);
    box-shadow: 0 2px 10px rgba(0,0,0,.2);
    color: #444;
    background-color: #fbfbfb;
}
.popover-header {
  
    background-color: #ffbb34 !important;
    font-family: 'Montserrat'!important;
    color: #fff;
}

.bs-popover-auto[x-placement^=bottom]>.arrow::after, .bs-popover-bottom>.arrow::after {
   
    border-bottom-color: #ffbb34!important;
}
.bs-popover-auto[x-placement^=bottom] .popover-header::before, .bs-popover-bottom .popover-header::before {
    border-bottom: 1px solid #ffbb34!important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
        border-top-style: solid;
        border-color: #ffbb34 #dee2e6 #fff;
}
a {
    color: #292424 !important;
    text-decoration: none;
    background-color: transparent;
}

 

var clone;
var clone1;
$(document).ready(function() {
    
$('[rel="popover"]').popover({
       
        html: true,
        trigger: 'click',
        title: "PopOver with TABS",
        placement: "bottom",
        content: function () {
            if($($(this).data('popover-content')).clone(true).hasClass('hide')){
                clone = $($(this).data('popover-content')).clone(true).removeClass('hide');
             }   
        $clone = $('#popoverContent').remove().html();
        return clone;
        
        }
    });
    $('[rel="popover1"]').popover({
       
        html: true,
        trigger: 'click',
        title: "PopOver with TABS",
        placement: "bottom",
        content: function () {
            if($($(this).data('popover-content')).clone(true).hasClass('hide')){
                clone1 = $($(this).data('popover-content')).clone(true).removeClass('hide');
             }   
        $clone1 = $('#popoverContent1').remove().html();
        return clone1;
        
        }
    });
});

 

Check Also

MaterialDesignRegLoginAnimation

Login & Registration using Materialize CSS with cool animation

Single form for Login & Registration using Materialize css with cool animation Login and Registration …

Leave a Reply

Your email address will not be published. Required fields are marked *