Unable to get the ripple effects in lumX? - lumx

I have installed all components and am trying out the various components mentioned in the CSS section of docs (http://ui.lumapps.com/css/buttons)
but the button get the shadow on hover, but do not ripple when clicked.
Here is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lumx Trial</title>
<!-- Head -->
<link rel="stylesheet" href="bower_components/lumx/dist/lumx.css">
<link rel="stylesheet" href="bower_components/mdi/materialdesignicons.css">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
</head>
<body>
<div class="mb">
<button class="btn btn--xs btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--s btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--m btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--l btn--blue btn--raised" lx-ripple>Button</button>
<button class="btn btn--xl btn--blue btn--raised" lx-ripple>Button</button>
</div>
<!-- Before body closing tag -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/velocity/velocity.js"></script>
<script src="bower_components/moment/min/moment-with-locales.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/lumx/dist/lumx.js"></script>
</body>
</html>

Sorry, My bad. I hadn't added the angular module!

Related

Last Updated Bootstrap Scripts for Tooltip does not work

I just started learning bootstrap. In this file tooltip is not coming. I copied the code from getboostrap.com official site still it is not working.Please help me out if there is any file missing or if anything else is there which is not working.
Thank you.
<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>Freelancer - Start Bootstrap Theme</title>
<!-- Bootstrap Core CSS - Uses Bootswatch Flatly Theme: http://bootswatch.com/flatly/ -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/freelancer.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
<link href="http://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
<!-- 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]-->
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Plugin JavaScript -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/classie.js"></script>
<script src="js/cbpAnimatedHeader.js"></script>
<!-- Contact Form JavaScript -->
<script src="js/jqBootstrapValidation.js"></script>
<script src="js/contact_me.js"></script>
<!-- Custom Theme JavaScript -->
<script src="js/freelancer.js"></script>
The tooltip requires you to initialize it, which I don't see that you have done here.
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})

JQuery & Bootstrap 4 Popover Conflict?

I was wondering if there may be a conflict between JQuery's and Boostrap 4's popover. When try to add a popover and load the page nothing is displayed when I click on the button element. See code example below:
<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='/css/fullcalendar.min.css' rel='stylesheet' />
<link href='/css/fullcalendar.print.min.css' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />
<script src='/js/lib/moment.min.js'></script>
<script src='/js/lib/jquery.min.js'></script>
<script src='/js/fullcalendar.min.js'></script>
<script src='/js/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
<div class="fc-right">
<div class="btn-group">
<button class="btn btn-primary" title="My Popover" data-toggle="popover" data-trigger="focus" data-placement="top" data-content="My popover content">?</button>
</div>
</div>
Adding the following noConflict code above the popover script does not appear to work either:
var bootstrapButton = $.fn.button.noConflict() // return $.fn.button to previously assigned value
$.fn.bootstrapBtn = bootstrapButton // give $().bootstrapBtn the Bootstrap functionality
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
Any assistant would be appreciated.
With the assistance of Smit I managed to resolve the issue by simplifying and using the following fiddle:
https://jsfiddle.net/ridgedale/xpbynn9w/#&togetherjs=80xVyj4TRc
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<link href='https://use.fontawesome.com/releases/v5.0.10/css/all.css' rel='stylesheet'>
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.css' rel='stylesheet' />
<link href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.print.min.css
' rel='stylesheet' media='print' />
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/locale/en-gb.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/gcal.min.js'></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js'></script>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</head>
<body>
<div id='cal-filters' class="fc-toolbar fc-header-toolbar">
<div class="fc-left">
<div class="btn-group">
<button class="btn btn-primary asl-events">Btn1</button>
<button type="button" class="btn btn-primary hnu-events">Btn2</button>
<button type="button" class="btn btn-primary hps-events">Btn3</button>
</div>
</div>
<div class="fc-right">
<div class="btn-group">
<button class="btn btn-primary" id="btnPopover"
title="Help List"
data-content="Help information"
data-trigger="click"
data-toggle="popover">Help</button>
</div>
</div>
<div class="fc-clear"></div>
<hr />
</div>
</body>
</html>

Bootstrap tooltip is not working at all

So, guys, I'm actually in a very weird situation and somehow can't be able to figure out what non-sense is happening to me. So the situation is I'm actually implementing my bootstrap tooltip fine and I have checked it on the JsFiddle, it is working fine there too, however, after a lot of efforts, it is not getting implemented on the web project I don't know why.
This is literally very weird. Here is my implementation which is working fine on JsFiddle.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function (){
$("[data-toggle=tooltip]").tooltip()
})
</script>
</head>
<body>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
</body>
And for the solutions I have done a lot of things but, unfortunately, all of them didn't work.
To take the class name into consideration
<script type="text/javascript">
$(document).ready(function (){
$(".btn-secondary").tooltip()
})
</script>
To use the body element to target the data-toggle :
<script type="text/javascript">
$(document).ready(function (){
$("body").tooltip({
selector : '[data-toggle=tooltip]'
})
})
</script>
To use the container as body and focus on the section :
<script type="text/javascript">
$(document).ready(function (){
$(".testimonial.home-page").tooltip({
selector : '[data-toggle=tooltip]',
container : 'body'
})
})
</script>
This is what I'm getting on my web project :
Don't take me wrong, I'm really confused about why it ain't happening since everything is fine. Any ideas would be appreciated, I'm a noob and I know that you guys can help me on this.
EDITS
I have checked the console and got this error saying the .tooltip is not a function:
You need to add few attributes inside tooltip function {container:'body', trigger: 'hover', placement:"bottom"}
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip(
{container:'body', trigger: 'hover', placement:"bottom"}
);
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- jQuery Script -->
<script src="https://code.jquery.com/jquery-1.12.0.js"></script>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- Popper.js, then Bootstrap JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
</body>
Solution is this, there was an error in calling of some jQuery files which was not called properly and hence whole project was messing up. So if you are using the popups, tooltips then make sure you call the jquery in a correct format. Here is the answer and how I got it working, just look at the calling of jQuery files and the other files accordingly and then in body I have called the script for the tooltip :
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="style.css">
<!-- SLICK SLIDER-->
<link rel="stylesheet" type="text/css" href="assets/slick/slick.css"/>
<link rel="stylesheet" type="text/css" href="assets/slick/slick-theme.css"/>
<!-- MATERIAL ICONS-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- jQuery first, then jQuery min.js, 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 type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
</head>
<body>
<section class="testimonial home-page" id="home">
<div class="container">
<h1>Bringing ease to<br>each home</h1>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
<div class="d-none d-sm-block" style="margin-top: 400px"></div>
</div>
</section>
<script type="text/javascript">
$(document).ready(function (){
$('[data-toggle="tooltip"]').tooltip({
container : 'body'
})
})
</script>
</body>
Try to call the Tooltip function in this way and pass the options as HTML attributes. You can check out some working examples here.
<button class="btn btn-warning" data-toggle="tooltip" data-placement="bottom" title="Basic tooltip">Hover me</button>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
});
</script>
Let me provide a solution. Try this once. It may works for u. First of all my view is tooltips will not work for type "button". But I dont know the exact reason for that. So just change that type="button" like below using type="submit"
Tooltip on bottom
Definitely it will work for you.

Bootstrap Tooltips Not Working

I can't get my bootstrap tooltips to work, I've tried literally everything, multiple jQuery versions, multiple bootstrap versions, multiple code snippets (seen a lot of similar problems here on stackoverflow), javascript on the head and after the body, nothing seems to work ...
Here's my current code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
​</script>
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</html>
You are trying to use jQuery before it has loaded.
If you look in the console, you will see the error:
Uncaught ReferenceError: $ is not defined
To resolve this, move your script tag after the jQuery library and the Bootstrap JS:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
​</script>
Try to do it in this way:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function(){
$('[data-toggle=tooltip]').tooltip();
});
​</script>
</body>
</html>
you have 2 problems over here:
1) Initialize jquery first
2) You have an illegal (invisible) character inserted after your tooltip initialization. It sucks I know, but you need to remove that char.
Following code should work
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Example">Tooltip</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
$(function() {
$('[data-toggle=tooltip]').tooltip();
});
</script>
</body>
</html>

Visualizing popup with bootstrap

i'm using bootstrap and i'm trying the javascript which should visualize a popup when you click on a certain object, that in my case is the patially hidden text.
Here's my code:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet">
<link href="bootstrap.min.js" rel="stylesheet">
<script>
$('#text').popover()
</script>
</head>
<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
</body>
</html>
When i click on the visualized text (which is "I see it") i doesn't do anything.
Obviously my entire code is more than this, but actually this script doesn't work in a simple HTML like this one.
With jquery it is better to wait until the dom is ready.
It is also not clear which bootstrap version you are using, but I am assuming version 3.
you can try the code below, or have a look at the example: http://jsfiddle.net/astuanax/s96Ag/
<html>
<head>
<!-- Load jquery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<!-- Load bootstrap from cdn, no need to load popover when loading the full bs library -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js">
</script>
</head>
<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
<script type="text/javascript">
/* Wait until the DOM is ready to call the popover function */
$().ready(function(){
$('#text').popover()
});
</script>
</body></html>
The javascript is loaded as a stylesheet: replace <link href="bootstrap.min.js" rel="stylesheet"> with <script src="bootstrap.min.js"></script> and place this preferrably right before the </body> tag
i modified as you told me. Here's the complete code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
</head>
<script>
$('#text').popover()
</script>
<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
</body>
</html>
Now it shows me the following error: TypeError: $(...).popover is not a function and $('#text').popover()
So i tried to solve this adding what it asks and this is the new code:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-popover.js"></script>
</head>
<script>
$('#text').popover()
</script>
<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
</body>
</html>
No errors now, but it still doesn't work.
New try:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link href="bootstrap.min.css" rel="stylesheet">
<script src="bootstrap.min.js"></script>
<script src="bootstrap-tooltip.js"></script>
<script src="bootstrap-popover.js"></script>
</head>
<script>
$('#text').popover()
</script>
<body>
<a id="text" href="#" class="btn btn-link" data-content='I want to visualize this when i click on it !' data-placement="bottom">I see this </a>
</body>
</html>

Resources