Bootstrap Tooltips Not Displaying On Hover - javascript

I've tried a few different ways to get Bootstrap tooltips working. I can't seem to find what's wrong with this. I've used Bootstrap tooltips before and it seems I always have an issue getting them going. Am I missing something obvious here? I'm not getting any JS errors or anything.
<!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>Quick Links</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery
<script type='text/javascript' src='js/jquery-2.1.1.min.js'></script> -->
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[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]-->
<style type='text/css'>
</style>
</head>
<body>
<div class="container" style='text-align:center;'>
<h1>Quick Links</h1>
<div class='well'>
Quick links
</div>
<div>
<div class='row'>
<div class='col-md-3 hidden-xs'>
</div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3'><a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca'>google</a></div>
<div class='col-md-3 hidden-xs'>
</div>
</div> </div>
</div><!-- /.container -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script type='text/javascript'>
$(document).ready(function () {
$('.qtooltip').tooltip({'placement': 'top'});
});
</script>
</body>
</html>

I have found the issue.
Working fiddle here: http://jsfiddle.net/8dfwcL98/
In your case you forgot to add a title property to your element. Title is what is displayed as the tooltip.
<a target='_blank' class='qtooltip btn btn-primary btn-lg btn-block' data-toggle='tooltip' href='http://www.google.ca' title="Awesome Tooltip">google</a>

Related

User navigating to site in game client gets HTML response from an unknown site

I have an HTML5 game built with NW.js that makes a GET request to my website to retrieve a static data file, file.json, hosted at www.example.com/file.json on Heroku.
One of my users can navigate to www.example.com/file.json and see the file properly, but when they open the game, this request returns HTML from a different site. After over 100,000 users, they are the first one to experience this.
The HTML response the user gets is this:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=980,user-scalable=yes,maximum-scale=2.0" />
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title></title>
<link rel="stylesheet" href="/steal-built/production.css" />
<script src="/js/thirdParty/jquery-1.8.3.min.js"></script>
<script src="/gui/js/jquery-utils.js"></script>
<script src="/gui/js/gui-core.js"></script>
<script src="/gui/js/gui-api.js"></script>
<script src="/js/thirdParty/modernizr.custom.js"></script>
<script src="/js/thirdParty/yepnope.1.5.4-min.js"></script>
<script src="/js/thirdParty/cssua.js"></script>
<script src="/js/thirdParty/moment.js"></script>
<!--noUI slider plugin: http://refreshless.com/nouislider/ -->
<script src="/js/thirdParty/jquery.nouislider.min.js"></script>
<!--jquery sort elements plugin: http://james.padolsey.com/javascript/sorting-elements-with-jquery/ -->
<script src="/js/thirdParty/jquery.sortElements.js"></script>
<!-- datepicker plugin: http://amsul.ca/pickadate.js/ -->
<![if gte IE 9]>
<script src="/js/thirdParty/pickadate.min.js"></script>
<![endif]>
<!-- datepicker: legacy for older browsers -->
<!--[if lte IE 8]>
<script src="/js/thirdParty/pickadate.legacy.js"></script>
<![endif]-->
<!-- jQuery plugin for parsing CSV file format: https://code.google.com/p/jquery-csv/ -->
<script src="/js/thirdParty/jquery.csv-0.71.min.js"></script>
<!-- MD5 encryption library -->
<script src="/js/thirdParty/md5.js"></script>
<!--ie polyfill for console.log and related -->
<script src="/js/modemUI/console-polyfill.js"></script>
<script src="/js/thirdParty/dust-full-0.3.0.js"></script>
<script src="/js/thirdParty/dust-helpers-1.1.1.js"></script>
<script src="/js/thirdParty/raphael.js"></script>
<!-- For calculating subnet masks https://github.com/franksrevenge/IPSubnetCalculator -->
<script src="/js/thirdParty/IPSubnetCalculator.js"></script>
</head>
<body>
<!--div that is used to identify if the user's browser is (likely) a mobile device. Will be hidden by css, then examined with js-->
<div id="div-is-smartphone"></div>
<div id="root-view"></div>
<!-- IE6 specific style here in case javascript disabled -->
<!--[if lte IE 6]><style type="text/css">#init-screen {position: absolute; height: 480px;}</style><![endif]-->
<!-- if we have no javascript, hide activity-indicator -->
<noscript><style type="text/css">#init-screen .activity-indicator{display: none}</style></noscript>
<div id="init-screen">
<div class="middle">
<div class="icon"></div>
<div class="title"></div>
<div class="activity-indicator"></div>
<div class="error-message">
<noscript>No javascript / Javascript absent</noscript>
</div>
</div>
<div class="logo"></div>
</div>
<div id="init-log" style="display: none;">
<div class="header">
<span class="close">x</span>
<span class="title">Initialization Log</span>
</div>
<div class="content">
<table></table>
</div>
</div>
<script src="/steal/steal.production.js?steal-built/production.js"></script>
</body>
</html>
Again, there is no chance that this is being served from my site. Could the user be affected by malware? They said they didn't mess with any configuration files in Windows, but I have my doubts. I checked their request headers, and everything looked completely normal.

Bootstrap navbar links don't work

My friends have asked me to make a website for their production company, which I've been working on, but as I am not a professional web designer, I've run into some issues. I've worked on this site by customizing a template I found online. However, I've come across an issue that I can't seem to fix despite searching here and on several other sites. The links in the navbar do not function when clicked. I was hoping someone could take a look and see if they've got any suggestions. The site can be found here.
This is my index HTML file-
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<meta name="robots" content="all,follow">
<meta name="googlebot" content="index,follow,snippet,archive">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Great Red Spot Productions | New Orleans, LA</title>
<meta name="keywords" content="">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab:400,700,100%7CRoboto:400,700,300,100' rel='stylesheet' type='text/css'>
<!-- Bootstrap and Font Awesome css -->
<link href="css/font-awesome.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Theme stylesheet -->
<link href="css/style.default.css" rel="stylesheet" id="theme-stylesheet">
<!-- Custom stylesheet - for your changes -->
<link href="css/custom.css" rel="stylesheet">
<!-- owl carousel css -->
<link href="css/owl.carousel.css" rel="stylesheet">
<link href="css/owl.theme.css" rel="stylesheet">
<!-- CSS Animations -->
<link href="css/animate.css" rel="stylesheet">
<!-- Favicon -->
<link rel="shortcut icon" href="favicon.png">
<!-- Mordernizr -->
<script src="js/modernizr-2.6.2.min.js"></script>
<!-- Responsivity for older IE -->
<!--[if lt IE 9]>
<script src="js/respond.min.js"></script>
<![endif]-->
</head>
<body data-spy="scroll" data-target="#navigation" data-offset="120">
<!-- *** NAVBAR ***
_________________________________________________________ -->
<div class="navbar navbar-default navbar-fixed-top" role="navigation" id="navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-collapse collapse" id="navigation">
<ul class="nav navbar-nav navbar-right">
<li class="active">Home
</li>
<li>About Us
</li>
<li>Services
</li>
<li>Portfolio
</li>
<li>Blog
</li>
<li>Contact
</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</div>
<!-- /#navbar -->
<!-- *** NAVBAR END *** -->
<div id="all">
<!-- *** INTRO IMAGE ***
_________________________________________________________ -->
<div id="intro" class="clearfix">
<div class="item">
<div class="container">
<div class="row">
<div class="carousel-caption">
<span class="pull-left"><h1 data-animate="fadeInDown">Great Red Spot Productions</h1><span>
</div>
</div>
</div>
</div>
</div>
<!-- *** INTRO IMAGE END *** -->
<!-- /#all -->
<!-- #### JAVASCRIPT FILES ### -->
<!-- js base -->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- for demo purpose -->
<script src="js/jquery.cookie.js"></script>
<!-- waypoints for scroll spy -->
<script src="js/waypoints.min.js"></script>
<!-- maps -->
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="js/gmaps.js"></script>
<!-- masonry layout -->
<script src="js/masonry.pkgd.min.js"></script>
<!-- owl carousel -->
<script src="js/owl.carousel.min.js"></script>
<!-- jQuery scroll to -->
<script src="js/jquery.scrollTo.min.js"></script>
<!-- jQuery counter -->
<script src="js/jquery.counterup.min.js"></script>
<!-- jQuery parallax -->
<script src="js/jquery.parallax-1.1.3.js"></script>
<!-- main js file -->
<script src="js/front.js"></script>
</body>
</html>
I'm not sure what other files would be necessary for help, please just let me know if you need any other info.
There are errors in your javascript.Open the developer tools you can view that.That errors may be preventing that links from functioning.
The problem is your jquery.Please use of the latest jquery version 3.1.1,it may help you,And define them in the correct place of your code.Download the bootstrap and set it in your html page.
It looks like the tutorial/example you used had the links scroll to the section it referred to. We can see this is the case as when we click on a link the error comes from jquery.scrollTo.min.js.
There must be a function that is called every time you click the menu items. This would either be inline in your index file, or in one of the many js files you included.
One debug method would be to comment out js files included until the links correctly, this should work as when javascript on the page is turned off the links work just fine.
Good luck!

adding css and js file in laravel 5.3

I want to include a css all css and js in single page and load it in all page.Now If I want to include bootstrap.css and bootstrap.js in welcome page I have included in welcome.blade.php page and if i want to add in another page I have included in second.blade.php page also.I want to include it in master page
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
Crate header.blade.php
<!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">
<meta name="csrf-token" content="{{ csrf_token() }}" />
<meta name="description" content="">
<meta name="author" content="">
<title>dhinchakwale</title>
<!-- Bootstrap Core CSS -->
<link href="{{ asset('/css/bootstrap.min.css') }}" rel="stylesheet">
<link href="{{ asset('/css/datepicker.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('/css/bootstrap-timepicker.min.css') }}" rel="stylesheet" type="text/css">
<link href="{{ asset('/css/dataTables.bootstrap.css') }}" rel="stylesheet">
<!-- Custom CSS -->
<link href="{{ asset('/css/admin.css') }}" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- jQuery -->
<script src="{{ asset('/js/jquery.min.js') }}"></script>
</head>
<body id="page-top">
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="/"><img alt="Brand" src="{{asset('/images/logo.png')}}" class="img-brand"></a>
</div>
</div>
</nav>
<div class="content-div">
#yield('content')
</div>
<div class="clearfix"></div>
<!-- Bootstrap Core JavaScript -->
<script src="{{ asset('/js/bootstrap.min.js') }}"></script>
<script src="{{ asset('/js/bootstrap-datepicker.js') }}"></script>
<script src="{{ asset('/js/bootstrap-timepicker.min.js') }}"></script>
</body>
</html>
And use like this
First extends header
Second Section of your content
#extends('layouts.header')
#section('content')
<section class="content-header">
<h1>
Hello
</h1>
</section>
#stop
Here is the steps you can follow
Create a master template layout
Extend the master template in all pages and paste your link into header section
To create a master template
//master.blade.php
<html lang="en">
#yield('header')
<body>
#yield('page-body')
</body>
</html>
Now Extend this layout in second.blade.php
#extend('master.blade')
#section('header')
<link href="{{ asset('css/bootstrap.css') }}" rel="stylesheet">
#endsection
#section('page-body')
{{!-- content of body --}}
#endsection
Define a common layout and include all .js and .css file on that layout and than bind your page with this layout.
Layout:
<html>
<head>
<title>App Name - #yield('title')</title>
</head>
<body>
#section('sidebar')
This is the master sidebar.
#show
<div class="container">
#yield('content')
</div>
</body>
</html>
Where: #yield directive is used to display the contents of a given section.
View:
#extends('layouts.default')
#section('content')
i am the home page
#endsection
You can define a master layout view file then define your CSS and JS there. Then all of your view file will extend that layout file. See documentation here: https://laravel.com/docs/5.3/blade

jQuery problems with Bootstrap

need to learn the basics of bootstrap for a new project coming up but so far its hurting my brain.
For some reason, I cannot get basic jQuery to function on the website.
Heres a jsFiddle of the basic bootstrap:
http://jsfiddle.net/D2RLR/6891/
Here is the pay structure:
<!DOCTYPE html>
<?php
// require the database connection / action class
require('libs/PHP_Classes/class.database.php');
require('libs/PHP_Classes/class.table.php');
?>
<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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="icon" href="../../favicon.ico">
<title>PHPGamble</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="sticky-footer-navbar.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js 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>
<!-- Begin page content -->
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Current Players On Table</h3>
</div>
<div class="panel-body" id="playerList">
Player 1 Player 2
</div>
</div>
</div>
<div class="footer">
<div class="container">
<p class="text-muted">Copyright Craig Lovelock 2014</p>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
<script>
$(document).ready(function(){
$('#playerlist').html('ss');
});
</script>
</body>
</html>
The playerlist will not change the html, The .html() is just to test. Nothing I try is working...
A you can see in the example it doesnt work, have tested it in a blank fiddle and ofcourse it works fine.
Cannot see why this is failing, its so simple.
Craig.
You are calling playerlist when you should playerList. JavaScript is case sensitive:
http://jsfiddle.net/D2RLR/6892/
jQuery is working well just what you have to do is pass correct id to jQuery. Change
$(document).ready(function(){
$('#playerlist').html('ss');
});
to
$(document).ready(function(){
$('#playerList').html('ss');
});

Unable to add Twitter-bootstrap to grails project - Beginner

Under BuildCOnfig.groovy i added the following
plugins {
...
runtime ":twitter-bootstrap:3.0.3"
...
}
Thereafter, i edited my index.html code to like like follows (I found this code example from bootstrap itself).
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="../../assets/ico/favicon.ico">
<title>Cover Template for Bootstrap</title>
<r:layoutResources/>
<!-- Bootstrap core CSS -->
<!-- Custom styles for this template -->
<link href="cover.css" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy this line! -->
<!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<r:layoutResources/>
<div class="site-wrapper">
<div class="site-wrapper-inner">
<div class="cover-container">
<div class="masthead clearfix">
<div class="inner">
<h3 class="masthead-brand">Cover</h3>
<ul class="nav masthead-nav">
<li class="active">Home</li>
<li>Features</li>
<li>Contact</li>
</ul>
</div>
</div>
<div class="inner cover">
<h1 class="cover-heading">Cover your page.</h1>
<p class="lead">Cover is a one-page template for building
simple and beautiful home pages. Download, edit the text, and add
your own fullscreen background photo to make it your own.</p>
<p class="lead">
Learn more
</p>
</div>
<div class="mastfoot">
<div class="inner">
<p>
Cover template for Bootstrap,
by #mdo.
</p>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
</body>
</html>
First, you should upgrade your version of the plugin to 3.1.1:
plugins {
...
compile ":twitter-bootstrap:3.1.1"
...
}
Second, since you are using the bootstrap plugin for Grails you need to use the resource modules to include it. Also you don't need to manually include jQuery as it will be included by the plugin. Here is a simple example of a starter template which is setup correctly for the bootstrap plugin and Grails.
<!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">
<meta name="description" content="">
<meta name="author" content="">
<title>My example bootstrap page</title>
<r:require modules="bootstrap"/>
<r:layoutResources/>
<link rel="shortcut icon" href="${resource(dir: 'images', file: 'favicon.ico'}">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<div class="container">
<p>My fantastic site goes here.</p>
</div>
<r:layoutResources/>
</body>
</html>
I highly recommend you read up about the resource tag to get an understanding of how to include assets like CSS. It's also worth noting that the documentation for the plugin explains all of the above.

Categories