I have this button where I want the popover to be displayed on click, but it isn't working. Can anybody help?
External links included
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
Button
<button class="buttonsprize" id="bookmark1" name="bookmark1" data-html="true" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover" style="padding:14px;">
<div style="text-align:center;"><i class="fas fa-bookmark"></i></div>
</button>
Javascript
<script>
$(function () {
$('[data-toggle="popover"]').popover();
});
</script>
$(function () {
$('[data-toggle="popover"]').popover()
})
<html lang="en">
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-lg btn-primary" data-toggle="popover" title="Popover title" data-content="This is bootstrap popover"> popover</button>
</body>
</html>
Can you please try this code.You can use popover like this. :)
Related
I am quite new to the web app development. I have a web-map application based on OpenLayers 6.5. I want to add Bootstrap Modal that will be auto displayed whenever the web map is loaded. I tried to follow Bootstrap documentation but my Modal is not showing. I use Bootstrap v.3.4. Here is the snippet of my code:
<!doctype html>
<meta charset="utf-8"/>
<html lang="en">
<head>
<!-- Ol CSS -->
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-layerswitcher-master/dist/ol-layerswitcher.css" />
<!-- Ol JS -->
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
<script src="libs/jquery.min.js"></script>
<!-- Ol-ext extension -->
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<script type="text/javascript" src="https://viglino.github.io/ol-ext/dist/ol-ext.js"></script>
<!-- J-Query -->
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<script src="libs/jquery-ui-1.12.1/external/jquery/jquery.js"></script>
<script src="http://158.194.94.29:8081/webgis/libs/jquery-ui-1.12.1/jquery-ui.js"></script>
<!-- Bootstrap -->
<link rel="stylesheet" href="libs/bootstrap.min.css">
<script type="text/javascript" src="libs/bootstrap.min.js"></script>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
etc.
Any idea why the modal is not showing?
here is the code. Run Snippet. The modal popup is opening on load.
$(window).on('load', function() {
$('#myModal').modal('show');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="libs/v6.5.0/css/ol.css" type="text/css">
<link rel="stylesheet" href="libs/v6.5.0/examples/resources/layout.css" type="text/css">
<link rel="stylesheet" href="libs/ol-ext-master/dist/ol-ext.css" />
<link rel="stylesheet" href="libs/jquery-ui-1.12.1/jquery-ui.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<div id="title"> <marquee behavior="scroll" direction="right"><h5><b>Title goes here</b></h5>
</marquee></div>
<!-- MODAL WINDOW -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Welcome to web-map app!</h5>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<img class="capimg" src="https://sss.jpg" width="300" height="100" />
<p style="text-align:justify">Text here</p>
</div>
</div>
</div>
</div>
<div id="map">
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<script src="libs/v6.5.0/build/ol.js"></script>
<script src="libs/ol-layerswitcher-master/dist/ol-layerswitcher.js"></script>
</body>
</html>
Do you want the modal to be shown on page load?
In the above case, you haven't called the modal yet and thus it is hidden. A modal by itself will remain hidden until or unless it is called using an event. If you want the modal to be shown on page load, use the below code.
<script type="text/javascript">
$(window).on('load', function() {
$('#myModal').modal('show');
});
</script>
Your head tag is not closed.
I tried with external css and js files. It is working....
JSFIDDLE
<head>
</head> // This is closing tag
If you want to open modal on page load....
$(window).on('load', function() {
$('#myModal').modal('show');
});
I have a simple bootstrap tooltip button that should show a tooltip when I hover.However it does not work. I have followed many suggestions online about initialize tooltips on document load and it still won't work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="../style.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<title>Parent View</title>
</head>
<body>
<div class="container mt-5">
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="">
Tooltip on top
</button>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script>
</body>
</html>
When you put the script inside the HTML BODY it's execute before jQuery has loaded at the end of the body, so jQuery $ is undefined.
Move the script after jQuery, Bootstrap and Popper, or to the HTML HEAD tag.
And, make sure the Tooltip has a title.
<button type="button" class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="My title">
Tooltip on top
</button>
Demo: http://codeply.com/go/2huMTgy7Q9
Any suggestions to fix this content shake? If I delete title="1" from a element shake will disappear.
<!DOCTYPE html>
<html lang="en">
<head>
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<div class="container">
<div class="list-group">
<a data-toggle="tooltip" href="TEST.ASP" class="list-group-item" title="1">First item</a>
</div>
</div>
<div class="container">
TEST
</div>
</body>
</html>
add margin bottom 0 to the first child of the list, check the code below:
<!DOCTYPE html>
<html lang="en">
<head>
<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/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</head>
<body>
<style>
.list-group-item:first-child {
margin-bottom:0;
}
</style>
<div class="container">
<div class="list-group">
<a data-toggle="tooltip" href="TEST.ASP" data-toggle="tooltip" data-placement="bottom" class="list-group-item" title="1">First item</a>
</div>
</div>
<div class="container">
TEST
</div>
</body>
</html>
I have properly linked the online bootstrap style sheet in html, but when I open the link, the 'Click here!' doesn't come in a button. How do I solve this?
Here's my code:
using btn-primary
This is the output:
No button there
To get the button, the <button> tag is used. And type is set on the basis of necessary like button, submit.
<div class="container">
<button type="button" class="btn btn-primary">Primary Button</button>
</div
For further detail, you can visit to https://www.w3schools.com/bootstrap/bootstrap_buttons.asp
set button not div
<button type="button" class="btn btn-primary">Primary</button>
see here:https://getbootstrap.com/docs/4.0/components/buttons/
BUT IT WORK WITH DIV check if you have bootstrap script
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<body>
<div class="container">
<div class="btn btn-primary">Primary</div>
</div>
It should work with a div as well as button or anchor tag just try.
<div class="btn btn-primary">Primaray</div>
OR
<button type="button" class="btn btn-primary">Primary</button>
OR
Primary
I just started playing around with materializecss framework. After going through the form page. I decided to try a simple example shown below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="shortcut icon" href="images/icon.png" type="image/png">
<title>form example</title>
<!-- CSS -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="css/materialize.css" type="text/css" rel="stylesheet" media="screen,projection"/>
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen,projection"/>
</head>
<body>
<div class="navbar-fixed">
<nav class="blue darken-4" role="navigation">
<ul id="slide-out" class="side-nav">
<li><div class="userView">
<div class="background blue darken-3">
<!--<img src="images/background3.jpg">-->
</div>
</div>
</li>
</ul>
<i class="material-icons">menu</i>
<div class="nav-wrapper">
<a id="logo-container" href="index.php" class="brand-logo"><img src="images/icon.png">Form</a>
<ul class="right hide-on-med-and-down">
<li><div class="right"><a class="waves-effect waves-light btn red modal-trigger tooltipped" data-position="bottom" data-delay="50" data-tooltip="Click to login or register " href="login.php" >Login</a></div></li>
</ul>
</div>
</nav>
</div>
<form id="uploadimage" class="col s12" method="post" action="" enctype="multipart/form-data" >
<div class="form-container">
<div class="row">
<div class="file-field input-field col s12">
<div class="btn waves-effect waves-light blue darken-3">
<span>browse</span>
<input type="file" id="image" name="image" accept="image/x-png,image/jpeg, image/jpg">
</div>
<div class="file-path-wrapper">
<input id="imagef1" name="imagef1" class="file-path validate" placeholder="Image 1: Product Front View" type="text">
</div>
</div>
</div>
<center>
<input type="button" id="postform" onclick="return check(this.form, this.form.image);" class="btn waves-effect waves-light red" value="Post Product" name="postform" />
</center>
</div>
</form>
<div id="modal5" class="modal bottom-sheet">
<div class="modal-content">
<p align="center">You must provide all the requested details. Please try again</p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
</body>
</html>
After clicking on the browse button, the jquery code on change does not execute. What am i doing wrong here?
I was able to fix the problem via help from #wackychocolatefactory from materializecss github page. The answer lies in the order of my JavaScript files. That is moving the script of jquery and materializecss above that of $(document).ready(function(){});
so I should put it in this order
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/materialize.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#image").change(function(){
alert("file upload changed");
});
});
function check(form, image) {
//Check each field has a value
if (image.value == '' ) {
$('#modal5').openModal();
//alert('You must provide all the requested details. Please try again');
return false;
}
}
</script>