CodePen Embed - New user tour

<body class="animated fadeIn">
  <div id="wrapper">
    <div id="menuOverlay" class="animated overlay-hidden"></div>
    <!-- Main UI -->
    <div class="menu animated fadeIn">
      <button class='pulse-button' data-toggle="popover" title="Popover title" data-trigger="focus" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">&plus;</button>
      <ul>
        <li>
          <a href="">
            <div class="bars"></div>
          </a>
        </li>
        <li>
          <div class="heading">
            <div class="logo">
              <span class="logo-part animated fadeIn">M</span><span class="logo-rest">ultiplier</span>
            </div>
          </div>
        </li>
        <li>
          <a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Messaging">
            <span class="icons ion-chatboxes"></span>
            <span class="text">Chat</span>
          </a>
        </li>
        <li>
          <a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Profile">
            <span class="icons ion-person"></span>
            <span class="text">Profile</span>
          </a>
        </li>
        <li>
          <a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Startups">
            <span class="icons ion-ios-briefcase"></span>
            <span class="text">Startup</span>
          </a>
        </li>
        <li>
          <a href="" class="tooltipped" data-position="right" data-delay="0" data-tooltip="Settings">
            <span class="icons ion-ios-settings-strong"></span>
            <span class="text">Setting</span>
          </a>
        </li>
      </ul>
    </div>
    <div class="view animated fadeIn">
      <header class="green accent-4">
        <div class="container">
          <h1 class="h1">Welcome Manpreet!</h1>
        </div>
      </header>
      <div class="card-group container">
        <div class="row">
          <div class="col-md-6 col-sm-12">
            <div class="card small">
              <div class="tabs" style="height: 100%;">
                <ul class="nav nav-pills" id="myTabs">
                  <li role="presentation" class="active animated"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Connection</a> <button class='pulse-button' data-toggle="popover" data-trigger="focus" title="Popover title" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">&plus;</button></li>
                  <li role="presentation" class="animated"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">New Startups</a></li>
                </ul>
                <div class="tab-content">
                  <div role="tabpanel" class="tab-pane active table-responsive" id="home">

                    <table class="table table-hover">
                      <thead>
                        <tr>
                          <th>No.</th>
                          <th>Name</th>
                          <th>Message</th>
                        </tr>
                      </thead>
                      <tbody>
                        <tr>
                          <th>1</th>
                          <td>Manpreet</td>
                          <td><span class="msg">Hi! How are you ? .. Could you help me out with my new Venture.. !!</span></td>
                        </tr>
                        <tr>
                          <th>2</th>
                          <td>Jacob</td>
                          <td><span class="msg">Hey Manni, lets catch up .. could we meet for a cup of Coffee.. Whatsay ?</span></td>
                        </tr>
                        <tr>
                          <th>3</th>
                          <td>Larry</td>
                          <td><span class="msg">The messaging is working pretty cool .. !</span></td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                  <div role="tabpanel" class="tab-pane" id="profile">Profile</div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-6 col-sm-12">
            <div class="card small text-center">
              <div class="card-content">
                <h1 class="h1">Profile Progress</h1>
                <h2 class="h2" style="font-size: 500%;">74%</h2>
                <div class="progress">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
                    <span class="sr-only">74% Complete (success)</span>
                  </div>
                </div>
                <h1 class="h1" style="margin-top: 20px; margin-bottom: 0; font-size: 25px;">Connections</h1>
                <h2 class="h2" style="color: #39cb58; font-size: 500%; margin: 0;">142</h2>
              </div>
            </div>
          </div>
          <!--<div class="col-md-3 col-sm-6 col-xs-12">
            <div class="card text-center">
              <div class="card-content">
                <h1 class="h1">Profile Progress</h1>
                <h2 class="h2">74%</h2>
                <div class="progress">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="74" aria-valuemin="0" aria-valuemax="100" style="width: 74%">
                    <span class="sr-only">74% Complete (success)</span>
                  </div>
                </div>
              </div>
            </div>
          </div>-->
          <!--<div class="col-md-3 col-sm-6 col-xs-12">
            <div class="card text-center">
              <div class="card-content">
                <h1 class="h1">Connections</h1>
                <h1 class="h1">142</h1>
              </div>
            </div>
          </div>-->
        </div>

        <div class="row">
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="card medium text-center" style="min-height: 400px; height: auto;">
              <div class="card-action">
                <h2 class="h3">Startups Following</h2>
              </div>
              <div class="card-content" style="padding: 20px 7.5px;">
                <h1 class="h1" style="color: #39cb58; font-size: 500%;">9</h1>
                <div class="container-fluid startup_following" style="padding: 0;">
                  <div class="row" style="margin: 0;">
                    <div class="col-md-12">
                      <div class="alert alert-success" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>Warning!</strong> Better check yourself.
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="alert alert-success" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>Warning!</strong> Better check yourself.
                      </div>
                    </div>
                    <div class="col-md-12">
                      <div class="alert alert-success" role="alert">
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <strong>Warning!</strong> Better check yourself.
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="card medium text-center">
              <div class="card-action">
                <h2 class="h3">Job Status</h2>
              </div>
              <div class="card-content">
                <h1 class="h1">Submission of Task</h1>
                <h1 class="h1">..</h1>
              </div>
            </div>
          </div>
          <div class="col-md-4 col-sm-6 col-xs-12">
            <div class="card medium text-center">
              <div class="card-action">
                <h2 class="h3">CrowdFunding</h2>
              </div>
              <div class="card-content">
                <h1 class="h1">Recieved Amount</h1>
                <h1 class="h1">5100$</h1>
              </div>
            </div>
          </div>
        </div>

      </div>
    </div>
  </div>
</body>

.h1,.h2,.h3,.h4,.h5,.h6 {
  font-family: Lato;
  font-weight: 300;
}
body {
  position: relative;
  color: #555;
  background-color: #fff;
  font-family: Lato;
  font-weight: 300;
}
#wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  overflow: auto;
}
#menuOverlay {
  position: fixed;
  height: 100%;
  top: 0;
  left: 0;
  right: 15px;
  bottom: 0;
  transition: 0.5s ease;
  /* visibility: hidden; */
}
.overlay-visible {
  background-color: rgba(0,0,0,0.5);
  /* visibility: visible; */
  z-index: 10;
}
.overlay-hidden {
  background-color: rgba(0,0,0,0);
  /* visibility: hidden; */
  z-index: -1;
}
.menu {
  position: fixed;
  float: left;
  background-color: #fff;
  height: 100%;
  width: 80px;
  top: 0;
  border-right: 1px solid #ddd;
  box-shadow: 1.5px 0 10px rgba(0,0,0,0.075);
  z-index: 10;
  transition: 0.5s ease;
}
.menu-open {
  width: 200px;
}
.menu ul {
  list-style: none;
  margin: 0;
  padding: 10px 0;
  overflow: hidden;
}
.menu ul > li {
  padding: 15px 20px;
  width: 100%;
  text-align: left;
}
.menu li:nth-child(2) {
  padding: 0;
}
.menu a {
  color: #333;
  text-decoration: none;
  display: inline-block;
  width: 100px;
  transition: 1s ease;
}
ul li a span.fa, ul li a span.icons {
  padding: 0 15px;
}
.icons {
  font-size: 30px;
  margin: 0;
  padding: 0 7.5px !important;
  color: #555;
  transition: 0.5s ease;
}
.icons:hover {
  color: #999;
}
.bars {
  position: relative;
  display: inline-block;
  height: 1px;
  width: 30%;
  background-color: #555;
  margin: 0 5px;
}
.bars:before {
  content: ' ';
  position: absolute;
  top: -7px;
  height: 1px;
  width: 100%;
  background-color: #555;
}
.bars:after {
  content: ' ';
  position: absolute;
  bottom: -7px;
  height: 1px;
  width: 100%;
  background-color: #555;
}
ul li a span.text {
  /*margin-left: 10px;*/
   opacity: 0; 
  transition: 0.35s ease;
  display: inline-block;
  transform: translateY(7.5px);
  font-family: Lato;
  font-size: 17px;
  font-weight: 300;
}
.logo-rest {
  opacity: 0;
  transform: translateY(7.5px);
  transition: 0.35s ease;
}
.tooltip {
  font-size: 14px;
  //padding: 0 20px !important;
  width: 100px;
}


/* Main View
------------------------------------------*/
/* Main Content View 
---------------------------*/
.view {
  position: relative;
  background-color: #fff;
  background-color: rgba(0,0,0,0.025);
  float: right;
  /*height: 100%;
  min-height: 100%;*/
  height: auto;
  width: calc(100% - 80px);
}
.navbar {
  padding: 20px;
  color: #333;
  background-color: #fff;
  font-family: Lato;
  font-size: 20px;
  font-weight: 300;
  border-bottom: 1px solid #ddd;
  box-shadow: 0 0 3.5px rgba(0,0,0,0.1);
}
header {
  padding: 80px 0;
  /* background-color: #39cb58; */
}
header .h1 {
  margin: 0 30px;
  color: #fff;
  text-shadow: 2px 3px 2.5px rgba(0,0,0,0.25);
}
.card-group {
  position: relative;
  top: -50px;
}
/*.card {
  position: relative;
  margin: 10px auto;
  padding: 15px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 2.5px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.15);
  overflow: hidden;
  font-family: Lato;
  font-weight: 200;
}

/* Card in Card-group
------------------------*/
.card.small .card-action, .card.medium .card-action, .card.large .card-action {
  position: relative;
}
.card .card-action {
  border-bottom: 1px solid rgba(160,160,160,0.2);
}
.card .card-action .h3 {
  margin: 0;
}
.card.medium .card-content, .card.small .card-content {
  height: auto;
}
.card .h1 {
  margin-top: 0;
}
.card .h1:first-child, .card-panel .h1:first-child {
  font-size: 25px;
}
.card .h1:nth-child(2), .card-panel .h1:nth-child(2) {
  font-size: 500%;
  font-weight: 300;
  color: #39cb58;
  text-align: center;
}
.startup_following .row .col-md-12 {
  padding: 0;
}
.card .alert-success {
  padding: 7px 15px;
  margin-bottom: 5px;
}

/* Progress Bar
-----------------------------*/
.progress {
  margin: 0;
  margin-top: 10px;
  height: 10px;
  background-color: #eee;
  border-radius: 50px;
  width: 90%;
  margin: 0 auto;
}
.progress-bar {
  background-color: #39cb58;
}
.card-content .h2 {
  color: #39cb58;
  font-size: 350%;
}

/* Messaging Preview
-----------------------------*/
.tabs {
  padding: 10px 25px;
  margin: 0 auto;
}
.nav-pills {
  margin: 10px 0;
  border: 1px solid #eee;
  display: inline-block;
  border-radius: 100px !important;
  transition: 0.5s ease;
}
.nav-pills>li+li {
  margin: 0;
}
.nav-pills li a{
  min-width: 100px;
  text-align: center;
  padding: 6.5px 0;
  font-weight: 500;
  border-radius: 100px 0 0 100px;
  transition: 0.5s ease;
  color: #bbb;
}
.nav-pills li.active a, .nav-pills li.active a:hover, .nav-pills li.active a:focus   {
  background-color: #39cb58;
}
.nav-pills li:nth-child(2) a {
  border-radius: 0 100px 100px 0;
}
.table {
  position: relative;
  cursor: default;
  transition: 0.5s ease !important;
}
.table tr, .table td, .table th{
  /* transition: 0.5s ease !important; */
  text-align: center;
}
.table th {
  text-align: center;
}
.table tbody tr:hover {
  color: #fff !important;
  background-color: rgba(57, 203, 88, 1) !important;
  font-weight: 500;
}
.table tr:hover .msg {
  /* overflow: auto; */
  white-space: normal;
  /* transition: 0.4s ease !important; */
}
span.msg {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 100px;
  max-width: 220px;
  /* background-color: #ddd; */
  transition: 0.4s ease;
}


/* Toggling the sidebar
-----------------------------*/
.menu-open ul li a .text {
  opacity: 1;
  transform: translateY(-7.5px);
}
.menu-open ul li .heading .logo-rest {
  opacity: 1;
  transform: translateY(0px);
}




/* Media Queries
------------------------------*/
@media only screen and (max-width: 990px) {
  .card .h1:first-child {
    text-align: center;
  }
  .card .h1:nth-child(2) {
    font-size: 400%;
  }
  header {
    padding: 35px 0;
  }
  header .h1 {
    margin: 0;
    text-align: center;
  }
  .card-group {
    top: 10px !important;
    padding: 0;
  }
  .tabs {
    text-align: center;
  }
}
@media only screen and (max-width: 768px) {
  .tabs {
    padding: 10px ;
  }
  .nav-pills {
    display: block;
    margin: 0 auto;
    margin-bottom: 10px;
    width: 80%;
  }
  .nav-pills li {
    width: 50%;
  }
}
@media only screen and (max-width: 480px) {
  .nav-pills {
    width: 100%;
  }
}










/* #Logo and Motto */
.heading { position: relative; top: 0; left: 0; right: 0; display: inline-block; cursor: default; }
.heading p { margin: 10px 0; font-size: 17.5px; }
div.logo { margin: 0 auto; text-align: center; font-family: "Source Sans Pro"; font-size: 30px; font-weight: 300; color: #39cb58; width: 100%; left: 0; right: 0; z-index: 200; margin-top: 8px; padding: 10px 0; }
span.logo-part { color: #fff; background-color: #39cb58; padding: 2px 5.5px 0px 10px; border-radius: 100%; margin: 5px; margin: 20px; margin-right: 3px; font-family: "Montez"; }
span.sub-head-logo { font-weight: 600; color: #39cb58; }
/* End of #Logo and Motto */






/* Pulse Effect for Tour */
.pulse-button {
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  position: absolute;
  display: block;
  width: 25px;
  height: 25px;
  padding-bottom: 8px;
  font-size: 1.3em;
  font-weight: bold;
  color: #fff;
  border: none;
  box-shadow: 0 0 0 0 #f0f0f0, 0 0 0 0 rgba(90, 153, 212, 0.7);
  border-radius: 100%;
  v-align: middle;
  line-height: 20px;
  background: #5a99d4;
  cursor: pointer;
  transform: translate3d(0, 0, 0);
  animation: pulse 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
}
.pulse-button:hover {
  animation-play-state: paused;
}

@keyframes pulse {
  to {
    box-shadow: 0 0 0 2px transparent, 0 0 0 12px rgba(90, 153, 212, 0);
  }
}



.menu .pulse-button {
  position: absolute;
  top: 135px;
  right: 2.5px;
}
.popover {
  z-index: 100000;
}

var menu = $('.menu'),
    overlay = $("#menuOverlay");

$('.menu ul li:first-child').click(function(e) {
  e.preventDefault();
  $('.menu').toggleClass('menu-open');
  overlay.toggleClass('overlay-visible overlay-hidden');
});

/*$(".btn-floating").click(function() {
    $('.fixed-action-btn').openFAB();
});*/

$(document).ready(function(){
  $('.tooltipped').tooltip({delay: 50});
  $('[data-toggle="popover"]').popover();
  
  $('.pulse-button').on('show.bs.popover', function() {
    //alert('Popover Initiated !');
    // $('#menuOverlay').addClass('overlay-visible').removeClass('overlay-hidden');
  });
  $('.pulse-button').on('hide.bs.popover', function() {
    //alert('Popover Initiated !');
    $('#menuOverlay').addClass('overlay-hidden').removeClass('overlay-visible');
  })
});

This Pen is owned by Manpreet Singh Gulati on CodePen.

See more by @manpreet on CodePen

External CSS

External JavaScript