2

I have a popover that is being opened from a button. I want to open another popover from the first one by clicking on a content.

JSFiddle Here

I am getting a popover on clicking on labels but am not getting a popover on clicking Create new Label. Is there something that I am doing wrong or is this not possible in JQuery?

sanjana
  • 85
  • 6

1 Answers1

0

Try this snippet

$('[data-toggle="popover6"]').popover({
  html: true,
  placement: 'bottom',
  trigger: 'manual',
  content: function() {
    return $('#popover-card-content').html();
  }
});

$(document).on('click', '[data-toggle="popover6"]', function() {
  $(this).popover('toggle');
  $('[data-toggle="popover7"]').popover({
    html: true,
    placement: 'bottom',
    trigger: 'manual',
    content: function() {
      return $('#popover-card-wrapper2').html();
    }
  });
});

$(document).on('click', '[data-toggle="popover7"]', function() {
  $(this).popover('toggle');
});
.optionc {
  border-radius: 2px;
  background: #e2e4e6;
  -webkit-box-shadow: 0 1px 0 0 #c4c9cc;
  box-shadow: 0 1px 0 0 #c4c9cc;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  cursor: pointer;
  display: block;
  height: 32px;
  margin-top: 8px;
  max-width: 300px;
  overflow: hidden;
  padding: 7px 7px 7px 11px;
  position: relative;
  text-decoration: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  white-space: nowrap;
}

.optionc:hover {
  background-color: rgb(193, 193, 193);
  color: white;
  border: none;
  box-shadow: 0 0 2px 0 #c4c9cc;
}

.popover-header {
  position: relative;
  text-align: center;
}

.pop-over-list li>a {
  display: block;
  font-weight: 700;
  padding-top: 3px;
  position: relative;
  text-decoration: none;
  width: 265px;
}

.popover {
  width: 500px;
}

#searchlabel {
  background: rgb(226, 228, 230);
  border: 0;
  border-radius: 3px;
  -webkit-box-shadow: none;
  box-shadow: none;
  height: 30px;
  margin-left: 0;
  width: 250px;
  padding-top: 8px;
  ;
  overflow: hidden;
}

#searchlabel:focus {
  box-sizing: border-box;
  box-shadow: 0 0 2px 0 #0284c6;
  background-color: white;
}

.label {
  height: 80px;
  width: 250px;
  position: relative;
  margin-top: 20px;
}

.label:hover {
  background: rgb(226, 228, 230);
}
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="style.css">
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<a href="blog/2015/08/jquery-bootstrap-icons.download.html" data-icon="download-alt"></a>

<body>

  <div>
    <a class="optionc" class="card1" title="Labels" tabindex="0" data-trigger="focus" data-toggle="popover6">
      <span class="fa fa-tag">  </span>
      <span>
          <b style="color:rgb(68,68,68); font-size:15; padding-left:5px" >Labels</b>
       </span>
    </a>
  </div>

  <div id="popover-card-content">
    <textarea id="searchlabel" placeholder="Search Labels..."></textarea>
    <ul style="margin-bottom:20px; padding:0; list-style: none;" class="pop-over-list">
      <li class="hover1">

      </li>
    </ul>
    <div class="label" style="font-size:12px;"><a title="Create Label" tabindex="0" data-trigger="focus" data-toggle="popover7">Create new Label</a></div>
    <hr>
    <div class="label" style="font-size:12px"><a>Enable color blind friendly mode</a></div>
  </div>
  <div id="popover-card-content1">
    <b>Name</b>
    <textarea id="searchlabel"></textarea>
    <b>Select a color</b>
    <span style="background-color:rgb(97,189,79); width:50px; height:30px; margin-right:3px; border-radius:3px;"></span>
  </div>
</body>
Lakindu Gunasekara
  • 4,221
  • 4
  • 27
  • 41
  • this is perfect! thankyou :). Is there someway to hide the first popup when the 2nd one is displayed? So it only shows one popup at a time – sanjana Jan 13 '18 at 08:03
  • Great! I think it is possible with some css. And I edited the code so the 2nd popover will come to bottom. It would be great if you can put an upvote as well Thanks – Lakindu Gunasekara Jan 13 '18 at 08:10
  • I added `$('[data-toggle="popover6"]').popover(`hide`);` inside `$(document).on('click', '[data-toggle="popover7"]', function() { ` but the both popovers hide as soon as they popup. I want the first to hide when the second shows up. How can i achieve just this? – sanjana Jan 13 '18 at 08:19
  • https://stackoverflow.com/questions/33783936/bootstrap-popover-manual-close-requires-two-clicks-to-reopen Check this out – Lakindu Gunasekara Jan 13 '18 at 08:31