Popup add custom style-CodePudding

I'm trying to add max-width to popover, but can't seem to get it working. I have multiple popover on the page but only want to add max to the one with pop1 id.

$('[data-toggle="popover"]').each(function(i) {
  var pop = {};
  pop.container = 'body';
  $(this).popover(pop);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">



<div class="content"><span data-trigger="hover click" data-toggle="popover" id="pop1" data-content="this is a popup" title="popup">Pop1</span></div>

<div class="content"><span id="pop2" data-trigger="hover click" data-toggle="popover" data-content="this is a popup" title="popup">Pop2</span></div>

CodePudding user response：

I'm not sure if you want the answer in CSS, but here it is:

.pop1 {
max-width: XYZpx;
}

XYZ is the max width you want it to be (ex: 500). You can also change px (pixels) to a different unit, such as vw (view width) or % (percentage) as an example. pop1 can also be changed to the class of the thing you're trying to give a max width to, in your case, popover I believe.

CodePudding user response：

This SHOULD have worked - why not I do not get.

Anyway posted for reference

$('[data-toggle="popover"]').each(function(i) {
  var pop = {};
  const $my = $(this).closest('#my');
  console.log($my.attr("id"))
  pop.container = $my ? "#my" : "body";
  $(this).popover(pop);
});

body > .popover {
  width: 300px !important;
}
#my > .popover {
  width: 300px !important;
}

<!doctype html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>


<div class="content"><span data-trigger="hover click" data-toggle="popover" data-content="this is a popup" title="popup">Pop2</span></div>

<div id="my">
  <div class="content"><span data-trigger="hover click" data-toggle="popover" data-content="this is a popup" title="popup">Pop</span></div>
</div>
</body>
</html>