I am experimenting with Accordions and Tooltips. My goal is to have an accordion where I can have a table of information with a question mark on the right which will act as a Tooltip when I hover over it.
I have come up with a design and followed Bootstrap 4 documentation as well however I have been unsuccessful at making a functional tooltip.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Tooltips Testing Page</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<!-- DOCUMENT/CODE LINKS -->
<link rel="stylesheet" type="text/css" href="Tooltips.css" />
<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="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://kit.fontawesome.com/b60e607f25.js" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table class="table table-dark">
<thead>
<tr>
<th scope="col">Description</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" style="font-weight: 400;">1(01)</th>
<td>Information <span class="arrow" style="float: right; font-size: 20px; color: deepskyblue;"><a data-toggle="tooltip" title="Hello-World"><i class="fas fa-question-circle"></i></a></span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
<!-- JAVASCRIPT SCRIPTS -->
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
</html>
CSS:
.accordion {
margin: 3vw;
border: #383838;
}
.card-header.collapsed {
background: #343a40;
box-shadow: 0 3px 20px rgba(0, 0, 0, 0.8);
}
.card-header:not(.collapsed) {
background:#343a40;
border-bottom: transparent;
}
Any help to get the tooltip working is sincerely appreciated.
Try removing this line from your script references:
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
Once you remove it, it should work as you want it to.
Please help me! Why is bootstrap not loading the classes?
Here's my code which is just a table and a simple button, yet no classes are applied
<!DOCTYPE html>
<html>
<head>
<title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</title>
</head>
<body>
<table class="table" id="table">
<thead>
<tr>
<th>Order ID</th>
<th>TX ID CxPay</th>
<th>TX ID IY</th>
<th>Amount</th>
<th>Class</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<tr>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
<td>1asas</td>
</tr>
</tbody>
</table>
<button class="btn btn-success">asasa</button>
<script>
$(document).ready(function() {
$('#table').DataTable();
} );
</script>
</body>
</html>
Neither bootstrap nor datatables is working. What am I missing here?
Any help is appreciated!
You are importing the script inside <title> that's not correct. In <title> only text is allowed describing your page's title. Place your <script> and <link> above the </head>
All your included files are in your <title>.
You have to write :
<head>
<title>My Title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
</head>
I'm new in HTML and I'm trying to use bootstrap in my project.
The problem is that I can't load bootstrap.min.css and none of the classes work. I did some searching and tried some ways but they didn't work for me
Here is my code :
<!DOCTYPE html>
%{--<!doctype html>--}%
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
%{--<link href="bootstrap.min.css" rel="stylesheet" media="screen">--}%
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
</html>
Using absolute path results in an error(use f12): Not allowed to load local resource: file:///E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css
I read somewhere that it's only chrome's error and Edge or IE browsers don't have this problem, they don't but the results are the same, css classes are not applied.
I put the bootstrap.min.css under the same directory as my html page is and used <link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen"> instead of what is used in the code.
but this time I got error 404: not found
This seems to be my problem with the path I've given...but I don't know what to do
Any idea what's wrong with it?
The slash used here
<link rel="stylesheet" href="E:\TekDays\web-app\bootstrap-3.3.7-dist\css\bootstrap.min.css" type="text/css">
would cause user browser to access the file from his filesystem.
Change the path
<link rel="stylesheet" href="E:/TekDays/web-app/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css">
UPDATED ANSWER :
Resource not found Error and what about resources plugin
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
its work check your css path
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<meta http-equiv = "X-UA-Compatible" content = "IE = edge">
<meta name = "viewport" content = "width = device-width, initial-scale = 1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" media="screen">
<title>TekDays - The Community is the Conference!</title>
</head>
<body>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>FirstName</th>
<th>FirstName</th>
</tr>
</thead>
<tr>
<td>Mammad</td>
<td>mammadii</td>
</tr>
<tr>
<td>Akbar</td>
<td>Akbarii</td>
</tr>
</table>
</div>
</body>
href replace with src
<link href="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
<link *src*="bootstrap.min.css" rel="stylesheet" type="text/css" media="screen">
I am using a main template with a {{> yield}} statement to render my Meteor JS pages. This is how it looks like:
<template name="main">
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<div class="container">
{{> yield}}
</div>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</template>
And with it, I render my actual pages e.q.:
<template name="home">
HOME
</template>
This all is functional because I use Iron Router like so:
Router.configure({
layoutTemplate: "main",
notFoundTemplate: "404"
});
Router.route("/", function() {
this.render("home");
});
The problem I face is that the page title isn't being rendered. I would expect the page title to be "Title" because I have defined <head> -> <title> to be "Title" (as you can see in my main template).
The weird thing here is that all the CSS does load, which indicates that the <head> section is - at least partially - rendered.
The head is rendered in a special process. Let's call it bundling for the lack of a better word. In that bundling-process the contents of all body and head elements are put into the HTML that will be served first. iron-router appends the contents of your template to the body after meteor is loaded on the client. These elements are only being searched for on the root level. The link tags are loaded, because most browsers (more or less) don't care where they occur.
I'd do something like this:
client/main.html
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="author" href="humans.txt">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="stylesheet" href="css/spacers.css">
</head>
<body>
<!-- Bootstrap JS -->
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
client/templates/main.html
<template name="main">
<div class="container">
{{> yield}}
</div>
</template>
I want to do this Dojo transition to another html file in same project. Select a view from an other html page, the code available on the link is very similar to what I have in my project. While the solution is accepted, I'm unable to have success with it whereas I have tested it several times. Can someone check it, please ?
Thank you in advance
Here are two html files that allow you testing it, it's not my real code but that provides same result :
Index.html
<html>
<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,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Index</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs /dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div id="detailsHeading" data-dojo-type="dojox.mobile.Heading"
data-dojo-props="fixed: 'top', label: 'Details', back:'Back', moveTo:'view1', transition:'slide', transitionDir:'-1',url:'sample.html'">
</div>
</body>
<html>
sample.html
<html>
<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,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>Sample</title>
<!-- application stylesheet will go here -->
<!-- dynamically apply native visual theme according to the browser user agent -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<!-- dojo configuration options -->
<script type="text/javascript">
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<!-- dojo application code -->
<script type="text/javascript">
require(["dojox/mobile/parser",
"dojox/mobile/ViewController",
"dojox/mobile",
"dojox/mobile/ScrollableView",
"dojox/mobile/TabBar",
"dojox/mobile/Switch",
"dojox/mobile/deviceTheme",
"dojox/mobile/compat",
"dojox/mobile/IconMenu",
"dojox/mobile/SimpleDialog",
"dojox/mobile/Button",
"dojox/mobile/Heading",
"dijit/registry",
"dojo/domReady!",
"dojo/dom",
"dojo/ready"
], function(parser) {
parser.parse();
});
</script>
</head>
<body>
<div data-dojo-type="dojox.mobile.ScrollableView" id="view1" data-dojo-props="selected:false,scrollDir:'v'">
</div>
</body>
</html>
Put them in a same directory and test it
The Main Html File.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- dojo stylesheet will go here -->
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojox/mobile/deviceTheme.js"></script>
<title>Dojo Mobile Simple View</title>
<!-- dojo configuration options -->
<script>
dojoConfig = {
async: true,
parseOnLoad: false
};
</script>
<!-- dojo bootstrap -->
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.6/dojo/dojo.js"></script>
<script>
require([
"dojox/mobile/parser",
"dojo/ready",
"dojox/mobile/ScrollableView",
"dojox/mobile/Heading",
"dojox/mobile/ToolBarButton"
], function (parser, ready ) {
ready ( function() {
parser.parse();
});
});
</script>
</head>
<body style="visibility:hidden;">
<!-- the view or "page"; select it as the "home" screen -->
<div id="view1" data-dojo-type="dojox/mobile/ScrollableView" data-dojo-props="selected:true">
<div id="detailsHeading" data-dojo-type="dojox/mobile/Heading"
data-dojo-props="fixed: 'top', label: 'View1'">
<span id="rightbtn" data-dojo-type="dojox/mobile/ToolBarButton"
style="float:right;"
data-dojo-props="transition:'slide', transitionDir:'-1',url:'Sample.html' ">Sample
</span>
</div>
</div>
</body>
</html>
The Sample.html file is a HTML Fragment it should NOT contain head, body tags.
<!-- Sample View -->
<div id="sample" data-dojo-type="dojox/mobile/ScrollableView" >
<!-- heading -->
<h1 id="edit1" data-dojo-type="dojox/mobile/Heading"
data-dojo-props=" fixed:'top' ">Sample
</h1>
</div>