I am new to Bootstrap, and I am trying to make a popover appear from clicking a button element. As far as I can tell I initialized bootstrap and the popover element correctly, but the popup element does not appear when I click my button.
I also do not see any errors or info in the console when I click the button, but the button itself gets a border around it when I click it which makes me think that the popover function is doing something and applying at least the bootstrap styles.
Here is my jQuery and Bootstrap initialization:
<!---JQuery Iniialization --->
<script src="/jquery/jquery.min.js"></script>
<script src="/jquery/libs/jqueryui/jquery-ui.min.js"></script>
<link rel="stylesheet" href="/jquery/libs/jqueryui/jquery-ui.theme.min.css"/>
<link rel="stylesheet" href="/jquery/libs/jqueryui/themes/smoothness/jquery-ui.min.css" />
<!---Bootstrap Iniialization --->
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
Here are my html elements and javascript function:
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover() ;
});
</script>
<button type="button" class="btn btn-secondary mx-2" data-container="body" data-toggle="popover" tabindex="0" title="Details" data-trigger="focus" title="Details" data-content="And here's some amazing content. It's very engaging. Right?">
<i class="fa-light fa-memo-circle-info"></i></button>
Am I missing something?
i added this cdn and it worked
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
Related
I am trying to get the status of a toggle button in semantic UI but am having issues. The state and isChecked properties are coming back as undefined.
Here is my sandboxed example:
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/semantic-ui#2.4.2/dist/semantic.min.js"></script>
<button class="ui toggle button" id="tgl">Select All</button>
<script>
$('#tgl').click(function(){
$(this).toggleClass('active');
alert($(this).isChecked)
});
</script>
As you can see, this comes back as undefined.
So I am using Bootstrap to create my collapsable elements. I am also using a range selector cdn, and I'm thinking there might be some styles from the BS CSS, specifically to the collapse elements, that are causing the error in UI.
When I place the range selector outside of the collapse element, it looks and works perfectly.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
</div>
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
But when I try to put it inside the collapse element, it throws the slider off the page.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<!--Slider documentation: https://maxshuty.github.io/accessible-web-components/-->
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<div id="container">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.9.3/dist/umd/popper.min.js" integrity="sha384-eMNCOe7tC1doHpGoWe/6oMVemdAVTMs2xqW4mwXrXsW0L84Iytr2wi5v2QjrP/xp" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.min.js" integrity="sha384-cn7l7gDp0eyniUwwAZgrzD06kc/tftFf19TOAs2zVinnD/C7E91j9yyk5//jjpt/" crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
I can't seem to pinpoint where its occuring.
Will work with 2 minor modifications
The range slider initializes itself when the page loads and calculates it's size.
When you enclose the slider in a hidden element, like a Bootstrap collapse, it can't calculate the size correctly. And that's why it looks messed up.
There are a couple of ways we could fix this problem. For example, we could call the slider's reset method to force it to resize correctly. Yet, the simplest solution is to show the collapse on page load, allow the slider to initialize, and then close the collapse. And all this happens without the user noticing anything.
In the markup we add the show invisible class:
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
And then in a script tag at the end of the page (or a DOMContentLoaded event handler) we remove show invisible class.
<script>
document.querySelector(".show.invisible").classList.remove("show", "invisible");
</script>
The selected answer
The selected answer "fixes" the problem by breaking the Bootstrap collapse control. It doesn't work like OP's original code and has some visible UI problems after the page loads.
Try it
Run the code snippet to understand how it works.
// hide the collapse after range control has initialized
document.addEventListener("DOMContentLoaded", function() {
document.querySelector(".show.invisible").classList.remove("show", "invisible");
});
<div id="container" class="mb-2 p-2 border">
<div>
<button type="button" class="btn btn-primary" data-bs-toggle="collapse" data-bs-target="#power-range">Power</button>
</div>
<div id="power-range" class="collapse show invisible" data-bs-parent="#container">
<range-selector min-range="0" max-range="15" inputs-for-labels />
</div>
</div>
<!-- Bootstrap 5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
I fixed the code by defining a custom class, You are using Bootstrap 5.1.0 where 5.1.3 is the latest so I have used it although it works perfectly on both.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<p>
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapse" role="button" aria-expanded="false" aria-controls="collapse">
Link with href
</a>
</p>
<div id="collapse">
<div class="card card-body">
<range-selector min-range="0" max-range="1000" />
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
<!-- Option 2: Separate Popper and Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js" integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/maxshuty/accessible-web-components#latest/dist/simpleRange.min.js"></script>
</body>
</html>
I have in my project Bootstrap5, ClipboardJS, JQuery and Tooltipster.
I have tried to follow exactly the initial instructions on the Tooltipster website, I could not figure out what I missed, here are two captions, the first of the JavaScript scripts and the other of one the components (buttons) where a tooltip should appear after clicking one of them:
<!-- (Right before </body>) -->
<!-- ClipboardJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.10/clipboard.min.js"></script>
<script>
var btns = document.querySelectorAll('.btn');
var clipboard = new ClipboardJS(btns);
</script>
<!-- Tooltipster -->
<script type="text/javascript" src="tooltipster.bundle.min.js"></script>
<script>
$(document).ready(function() {
$('.btn').tooltipster({
trigger: 'click'
});
});
</script>
<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<!-- Bootstrap -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<button class="btn btn-outline-dark rounded ms-2" title="Copied! 🙌" type="button" data-clipboard-target="#email">
Copy
</button>
Thank you for help.
I had to load JQuery before Tooltipster as Marc said in a comment, I was not aware it matters.
I have a list of posts in my django template and wants to put three dots on each post and want a popover to get triggered whenever I click on the three dots and the popover should have clickable options like Delete and Copy Link. You can have a look at instagram and facebook posts for a better idea. Thanks in advance.
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div></div>
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the
popover"><span>â‹®</span></a>
<style>
span {
content: "\22EE";
}
</style>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
I tried this code but options are not clickable and also I am unable to display more than one options in the popover
At first I would recommend you to use a more current version of bootstrap if possible. At the time of writing that is bootstrap 5.
Want you probably want is not a popover, but a dropdown instead.
Maybe you should invest some time reading the bootstrap docs. Documentation about dropdowns you can find here: https://getbootstrap.com/docs/5.1/components/dropdowns/
Your example in bootstrap 5 could look like this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Popover Example</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</head>
<body>
<div class="btn-group dropend">
<button type="button" class="btn" data-bs-toggle="dropdown" aria-expanded="false">
â‹®
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Delete</a></li>
<li><a class="dropdown-item" href="#">Copy Link</a></li>
</ul>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Glyphicons</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link href="bootstrap-4.0.0-dist/css/bootstrap.min.css" rel="stylesheet">
<link href="styles.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<div class="page-header">
<h1>Bootstrap Glyphicons</h1>
<p class="lead">Icons that are actual, real-life fonts! This means no Photoshopping required :)</p>
</div><!-- page-header -->
<p><span class="glyphicon glyphicon-circle-arrow-right"></span></p>
<h3><span class="glyphicon glyphicon-music"></span> An icon in a header!</h3>
<p><span class="glyphicon glyphicon-trash"></span> There's an icon for just about anything you can think of!</p>
<p>You can link an icon like so: <span class="glyphicon glyphicon-cog"></span></p>
<button type="button" class="btn btn-default btn-lg btn-info">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span> A button with an icon
</button>
<br><br>
<div class="alert alert-warning">
<span class="glyphicon glyphicon-exclamation-sign"></span>
You may use icons in alert messages, too!
</div>
<br>
<h4>Use icons for User Interface design</h4>
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-play"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-pause"></span></button>
<button type="button" class="btn btn-default"><span class="glyphicon glyphicon-stop"></span></button>
</div>
</div>
<hr>
</div><!-- container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></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>
</body>
</html>
hey I am trying to show icon in the browser but it is not showing in the browser while I am using proper bootstrap tags but didn't find any icon in the browser
is it any tag error or something please help me to understand it
** is it necessary ** to use all the cdn links like jQuery javascript are use or choose manually which one is the better decision.
That's because you're using Bootstrap 4, and according to its documentation, in that version they dropped the Glyphicons icon font, that means, from v4.0, Bootstrap won't offer Glyphicon support.
If you need to use icons in Bootstrap 4, you need to search alternatives like Font Awesome and add it by yourself, or get down to Bootstrap 3.3.7 and use it.
You have to include the glyphicons. Put this after importing bootstrap
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
Replacing your line
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
with
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
solved the issue for me.
You are also trying to reference a local version of the 4.0.0 css, you probably don't need that line.