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
Related
In my VS Code editor when I code for a responsive web sites (for example - the below code), the output web page should be responsive for long/small/medium screen size(expectation) but the output web page is not as I have expected although I have included the Bootstrap CDN links in the head tag.
<!doctype html>
<html lang="en">
<head>
<title>Title</title>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="row">
<div class="col-md-6 col-sm-3" style="background-color:grey; border: 1px solid;">col-md-6</div>
<div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md-3</div>
<div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md3</div>
<div class="col-md-3 col-sm-3" style="background-color:grey; border: 1px solid;">col-md3</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
I tried to make an responsive website using HTML, CSS, and Bootstrap and the code is above. I was expecting from it to be responsive for long/small/medium screen size but it is not responsive.
Use this code
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.4.1/dist/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
What my dir looks like:
I've doubled checked the name, the location everything, but it just shows the default no image found icon image. My code for the picture is <img src="img.png">. I tried changing the image, still no fix. When I hover over the img.png is says
[Follow link](file:///c:/Users/mathe/OneDrive/Documents/Data analysis/Python/CHAT-BOT/templates/img.png) (ctrl + click), so surely it should work?
Full html code:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MJChat Bot</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
</head>
<body>
<img src="img.png" alt="Italian Trulli">
<div class="container">
<h1>Welcome to MJ Chatbot</h1>
<hr>
<br>
<div class="row">
<div class="col-lg-9">
<input class="form-control" type="text" name="question" id="question">
</div>
<div class="col-lg-3">
<button class="btn btn-primary btn-block" id="submit-button">Send</button>
</div>
</div>
<br>
<div class="row">
<div class="col">
<p id="response"></p>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.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>
<script>
jQuery(document).ready(function() {
$("#submit-button").click(function(e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/chatbot",
data: {
question: $("#question").val()
},
success: function(result) {
$("#response").append("<br><br><img src='picture.jpg'/> You: "+$("#question").val()+ "<br><br><img src='picture.jpg'/> MJBot: "+result.response);
$("#question").val("")
},
error: function(result) {
alert('error');
}
});
});
});
</script>
</body>
</html>
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 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. :)
I have limited experience with Bootstrap 4 but am not sure why my page is acting like this. I have these 2 rows, one of which I want for the title to be above the container with white background. I am trying to make 2 columns, one for a sidebar and one for the content on the right however when I use columns they only stack which can be seen here - http://michaelfroseth.com/clients/notebook-html/subpage.html
I have no idea why? They seem to operate fine outside of the row, but am I not supposed to be using a new row? Any documentation or point in the right direction would be much appreciated!
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./css/custom.css?v=2">
<title>Pam's Notebook | V1.0</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-5"><span style="color:#fff;">Pam's Notebook</span> <span style="color:#CCAC23;">V1.0</span></h1>
</div>
</div>
<div class="row">
<div class="login-container col-md-12">
<div class="col-md-4">SIDEBAR</div>
<div class="col-md-8">CONTENT</div>
</div>
</div>
</div>
<!-- ALL OF YOUR SITE CODE HERE -->
<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>
<!-- ADDITIONAL JS HERE -->
</body>
</html>
You should use row inside the container, not as a wrapper.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<script defer src="https://use.fontawesome.com/releases/v5.0.2/js/all.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="./css/custom.css?v=2">
<title>Pam's Notebook | V1.0</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h1 class="display-5"><span style="color:#fff;">Pam's Notebook</span> <span style="color:#CCAC23;">V1.0</span></h1>
</div>
</div>
<div class="login-container col-md-12">
<div class="row">
<div class="col-md-4">SIDEBAR</div>
<div class="col-md-8">CONTENT</div>
</div>
</div>
</div>
<!-- ALL OF YOUR SITE CODE HERE -->
<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>
<!-- ADDITIONAL JS HERE -->
</body>
</html>