I am trying to initialize foundation tool-tip without initializing everything (i.e. $(document).foundation()) and I am failing in this simple task.
I am wondering (1) How to use new Foundation.Tooltip instead (2) do I need modernizr because documentation in foundation website did not mention modernizr as a requirement.
I mentioned modernizr because without that tool-tip would not have any styles nor html inside that would show.
Thank you
<!DOCTYPE html>
<meta name="robots" content="noindex">
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/js/foundation.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.3.1/css/foundation.css" />
<body>
<div class="row">
<span class="has-tip" title="Tooltips are awesome, you <a>link</a> totally use them!">
Hover me
</span>
</div>
<script id="jsbin-javascript">
$(document).ready(function() {
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
// $(document).foundation();
})
</script>
</body>
</html>
To answer the second part first: Foundation 6 doesn't require Modernizr (but F5 did) (see: http://foundation.zurb.com/forum/posts/37234-modernizr-and-foundation-6) so you can use all of the Foundation 6 components entirely without Modernizr.
In your example I think you are mixing creating a tooltip dynamically:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
With initialising a tooltip:
$(document).foundation(); // initialise ALL Foundation script - usually required by Foundation generally
OR
$('.has-tip').foundation() // just scripts associated with this element (e.g. tooltips)
So to create and then initialise JUST the tooltips:
new Foundation.Tooltip($(".has-tip"), {
allowHtml: true
});
$('.has-tip').foundation();
For obvious reasons creation must precede initialisation.
See example: https://jsfiddle.net/tymothytym/b6eoh2yg/1/
I haven't worked with foundation before so I'm definitely no expert. However, I think I've figured out why your code isn't working.
Working Code
You can get all the links needed and see an example of working code in the CodePen located here: http://codepen.io/SupposedlySam/pen/ybbYMp.
What you need to get Foundation Tooltip plugin working
Foundation.css
Modernizr.js (placed in the head tag or below all other scripts before body close (via Foundation's JavaScript Setup Page)
JQuery.js
Foundation.js
Foundation.tooltip.js (only needed if not using foundation.min.js which includes all plugins)
Weird Stuff Not Really Told To You
The tooltip will appear at the top-left of the body (at origin 0,0) if there isn't enough space for the height of the word plus the height of the tooltip.
If you want your tooltips to stay open when clicking on the word associated to it, a tabIndex must be set on the element.
If you're extending the options of a Foundation plugin you must initialize each element you want the functionality on individually.
You must use " instead of double quotes (") in html attributes and they cannot be escaped with a backslash (\).
if you do not want to initialise foundation on your entire document, you can initialise it on specifice elements, like :
$('.has-tip').foundation();
foundation do not depend on modernizer, it works without any problem without modernizer.
and a codepen to a tooltip without calling document.foundation:
https://codepen.io/faw/pen/vmZjzg
Related
I have been trying to use the library to make material for my students.
https://glorious.codes/demo
I want to make animations, but I cannot understand how to use or where to use the library. I think it is necessary to use it from an html file. install the library but when opening the page it only creates the text that I place as a test.
I am using WebStorm as IDE, creating a node.js project.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="node_modules/#glorious/demo/dist/gdemo.min.css">
<script src="node_modules/#glorious/demo/dist/gdemo.min.js"></script>
</head>
<body>
</body>
</html>
Can someone guide me on what program or how to work with the library. It is the first time that I try to perform animation with JavaScript.
If you are new to web technologies, there is a pretty steep curve here. Personally, I'd take a step back and familiarize myself with the tools. If you have a minute, check out W3school's site. There is plenty of information to get you moving quickly with HTML/CSS/JS. Specifically focus on CSS selectors and Javascript and this will make a lot more sense.
Now for the question you asked:
First, NodeJS isn't necessarily required to achieve your goal. You can create a simple HTML file and reference the Glorious libraries directly from the web. See what I did in the <script> and <link> elements below.
Once you have the libraries loaded, you need to:
Instantiate the library and assign it to a variable to use in the future (see const demo = new GDemo(...))
Tell the library where in your HTML you want it to render the animation. In this case it is a <div/> with id='container'.
Tell the library what to render. This is the gDemo.openApp(...) section. I pulled this example directly from this library's GitHub page.
const gdemo = new GDemo('#container');
const code = 'console.log("Hello World!");'
gdemo
.openApp('editor', {
minHeight: '400px',
windowTitle: 'demo.js'
})
.write(code, {
onCompleteDelay: 2000
})
.openApp('terminal', {
minHeight: '400px',
promptString: '$'
})
.command('node ./demo')
.respond('Hello World!')
.command('')
.end();
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/#glorious/demo/dist/gdemo.min.css" rel="stylesheet" />
</head>
<body>
<div id="container"></div>
</body>
</html>
Could you please detail a bit more the problem. From your example you just created an empty page. What are you trying to put in your page ? Tables ?
Also I would suggest the use of framework like Materials (https://material.io/components) within React if you are starting a Js project from scratch except if you have something specific in this lib you really want to display.
Trying to make Bootstrap show the tooltip function, I have followed exactly as Bootstrap DOC about Tooltips and declare my attribute and properties. when I hover over the text the data Some tooltip text! shows as there is alt="" function only, but not in style as Bootstrap mentioned in their document.
Steps I have taken to resolve this issue:
Include tooltip.js from external CDN
activate tooltip throw <Script>$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});</script>
Add Google API of jQuery (I know is not neccessery)
check if the page is loading the Bootstrap CDN and external ones (All Do!)
Header HTML Markup
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="css/style.css" rel="stylesheet">
<!-- Latest compiled and minified JavaScript -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
HTML Markup
Hover over me
Here is an image of how it shows.
Remember also that Bootstrap Tooltip don't like jQuery UI (there are a few names conflict and 'tooltip' is one of them).
The solution is changing the script loading order: jQuery UI first, bootstrap.js after.
Here's a working template for you. My guesses as to what was wrong:
jQuery always needs to come before bootstrap.js.
If you don't have a local server running, you need to add the http: to the CDN addresses.
You may have been trying to initialize the tooltip in the head tags. Problem is that the document probably wasn't ready.
The following works fine.
HTML:
<!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>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.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/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>
Hover over me
<!-- 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="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script>
$( document ).ready(function() {
$('[data-toggle="tooltip"]').tooltip({'placement': 'top'});
});
</script>
</body>
</html>
Your problem is more than likely that you failed to initialize the tooltip correctly. Take a look at this bootply
The documents state:
HTML:
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
Jquery:
$("[data-toggle=tooltip").tooltip();
Remember you only need bootstrap.min.css and bootstrap.js for the tooltip to work correctly.
Remember to load scripts and style sheets using absolute URLs (add / in front of path).
bootstrap depends on jquery, load jquery first.
The OP described precisely the issue I was seeing in Angular 8 with Bootstrap 4.4.1 using JQuery 3.4.1 and not using ng-bootstrap or ngx-bootstrap. The image in the OP is bang on.
Some of the answers were sort of helpful while missing the key point that if the DIV is wrapped in an *ngIf it is difficult to get tooltip() to see that the DIV should have a listener attached to it for mouseenter / mouseleave events. Doing this as the document loads the first time is useless for a single page application where the content is dynamically added and removed.
The critical answer turned up https://github.com/twbs/bootstrap/issues/4215 and codepen https://codepen.io/Johann-S/pen/djJYPb . For me the fix was ...
app.component.ts ... just once in this one file is enough
import { Component } from '#angular/core'
declare var $: any
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
})
export class AppComponent {
constructor(){
$('body').tooltip({
selector: '[data-toggle="tooltip"]'
})
}
}
and in every place the tooltip should be seen (component.html files for me).
<div data-toggle="tooltip" data-placement="top" title="Tool Tip Text">
Binding to the body allows the tooltip selector to see the addition of any 'new' DOM elements irrespective of the timing.
As to the performance hit ... not sure yet :D, though it is mercifully light on typing.
Try adding this code at the bottom of your HTML i've needed it to trigger the tooltip to work. Add class="ttop" to your tooltips in HTML code.
$(document).ready(function(){
$(".ttop").tooltip({
placement : 'top'
});
});
In my case using AngularJS, even all css/js scripts were sequenced/invoked properly but still wasn't showing.
The issue was it's under from a tag with "ng-if" attribute. After I placed it outside from that tag It works fine.
Maybe there's a slight delay with AngularJS rendering the elements with "ng-if" while jquery is initialising the tooltip.
You must initialize tooltip like:
$('[data-toggle="tooltip"]').tooltip()
If you are using popper.js with bootstrap 4, instead of using:
<script src="~/Scripts/popper.min.js"></script>
use the .js in the UMD directory:
<script src="~/Scripts/umd/popper.min.js"></script>
All your jquery*.js files must come before bootstrap.js.
jquery-{version}.js
jquery-confirm.min.js
jquery-ui-{version}.js
jquery.validate*
etc...
bootstrap.js
Then use:
<script>
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>
make sure if you add bootstrap.min.js
and also add
<script> $(document).ready(function () { $('[data-toggle="tooltip"]').tooltip(); }); </script>
This question has been sufficiently answered, but the solutions don't apply; my links were in good order. Turns out that there's a conflict with Font Awesome (FA). For example, this wouldn't work for me:
<span class="fas fa-search" data-toggle="tooltip" title="Search my site"></span>
If I remove the FA classes, and enter text within the span, the tooltips render in the proper style... but isn't a good solution. However, by encapsulating that span within another span does work:
<span data-toggle="tooltip" title="Search my site"><span class="fas fa-search"></span></span>
I hope this helps the odd soul out there. Or two :^)
Is there an easy way to use Bootstrap in an existing project?
Currently it adds styles for table,a etc. which messes up everything in the page.
I really love the modal window, some buttons, but I don't want to hunt bootstrap css all the time to switch items back to default styles.
Bootstrap 3 // Less 1.4.0 edit:
After Bootstrap 3 and Less 1.4.0 has come out, bootstrap has started using the :extend() pseudo selector. This means that certain things will fail in the original code I've posted (you'll get some .bscnt .bscnt form-horizontal code which means you have to nest two divs inside eachother, which is just dumb). The easy way to fix this is to remove the first two lines from bootstrap.less (#import variables.less and #import mixins.less) and instead import these files outside of the .bs-cnt scope:
#import "variables.less";
#import "mixins.less";
.bscnt {
#import "bootstrap.less";
}
You can also download bootstrap from here: Bootstrap source and then enter the "less" directory and add a file called "bootstrap-custom.less" where you'll enter the following content:
.bs-cnt {
#import "bootstrap.less";
}
"bs-cnt" for BootStrap-CoNTainer. You can make it longer if you want, but remember that it'll be pasted in a lot of places in the compiled CSS, so it's to save space in the end file.
After you've done this, simple compile the bootstrap-custom.less file with your favourite less compiler (SimpLESS is pretty good if you're on Windows), and then you'll have a compiled bootstrap file that only works when you place a container element with the class of "bs-cnt".
<div class="bs-cnt">
<button class="btn btn-success btn-large">This button will be affected by bootstrap</button>
</div>
<button class="btn btn-danger">This however; Won't</button>
You can use the "customize" feature on the bootstrap website to get only those features you want: Twitter Bootstrap Download Page. Most of bootstrap's rules are explicit. You'll probably only want to leave out the reset rules which are implicit by default.
I think the link in answered section is not already updated. Here is where you can customize your Bootstrap directly on GetBootstrap site:
Customize and download - GetBootstrap
Using IFrame
Just make one html document with bootstrap in it, have your bootstrap element that you want on that page, and use Iframe to get it on the other one..
element_name.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<title>Element</title>
</head>
<body>
<!--Code for the actual element-->
</body>
</html>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<style>
iframe {
border: none;
}
</style>
</head>
<body>
<iframe src="element.html"></iframe>
<!--Other stuff on the page-->
</body>
</html>
The element in the element.html will be integrated in the index.html like it's own element, without even importing a single bootstrap stylesheet in the index.html and there is no need to make custom bootstraps, which can be tedious.
You can tag the styles you want to not get overwritten by a special tag. Just put the !important tag. It can take a long time to paste it after every line of code but it'll be worth the time. Or you can use the bootstrap.css file instead of the bootstrap link and delete all the styles that are overriding your styles. You can download the bootstrap css file here
This question already has answers here:
Why don't self-closing script elements work?
(12 answers)
Closed 2 years ago.
I am following ExtJS tutorial and tried creating a new page. It works.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title id='title'>HTML Page setup Tutorial</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="ext-3.3.1/resources/css/ext-all.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="ext-3.3.1/ext-all-debug.js"></script>
<!-- overrides to library -->
<!-- extensions -->
<!-- page specific -->
<script type="text/javascript">
// Path to the blank image should point to a valid location on your server
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.onReady(function () {
console.info('woohoo!!!');
}); //end onReady
</script>
</head>
<body>
</body>
</html>
However, if I change the script tag line to use self closing tag, like following, it doesn't work.
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="ext-3.3.1/adapter/ext/ext-base.js"/>
In Firebug, it complains Ext.EventManager is undefined. I have two questions
Is it generally a bad idea to use self-closing tag for script? I have read this post but it sounds to me it's talking about xhtml.
I am trying to learn Javascript. Although I know the way to fix it is to not use self closing tag, I would still like to know why FireFox think Ext.EventManager is undefined?
Yes, it's a bad idea. The script tag needs an ending tag, as you can see in the HTML specification - The script element
Different browsers have different ways of handling incorrect code. Each browser tries to make the best of the situation, but they have different opinions about what's best in each situation. One way to handle some of the incorrect code is to ignore it, which is likely the reason why the script is not executed in Firefox.
Besides, as you don't have a doctype tag the page is by default HTML, not XHTML, so you can't use self-closing tags at all.
The demos for the jquery ui dialog all use the "flora" theme. I wanted a customized theme, so I used the themeroller to generate a css file. When I used it, everything seemed to be working fine, but later I found that I can't control any input element contained in the dialog (i.e, can't type into a text field, can't check checkboxes). Further investigation revealed that this happens if I set the dialog attribute "modal" to true. This doesn't happen when I use the flora theme.
Here is the js file:
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
Here is the html that uses the flora theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
Here is the html that uses the downloaded themeroller theme:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
As you can see, only the referenced css file and class names are different.
Anybody have a clue as to what could be wrong?
#David: I tried it, and it doesn't seem to work (neither on FF or IE). I tried inline css:
style="z-index:5000"
and I've also tried it referencing an external css file:
#SERVICE03_DLG{z-index:5000;}
But neither of these work. Am I missing something in what you suggested?
Edit:
Solve by brostbeef!
Since I was originally using flora, I had mistakenly assumed that I have to specify a class attribute. Turns out, this is only true when you actually use the flora theme (as in the samples). If you use the customized theme, specifying a class attribute causes that strange behaviour.
I think it is because you have the classes different.
<div id="SERVICE03_DLG" class="flora"> (flora)
<div id="SERVICE03_DLG" class="ui-dialog"> (custom)
Even with the flora theme, you would still use the ui-dialog class to define it as a dialog.
I've done modals before and I've never even defined a class in the tag. jQueryUI should take care of that for you.
Try getting rid of the class attribute or using the "ui-dialog" class.
After playing with this in Firebug, if you add a z-index attribute greater than 1004 to your default div, id of "SERVICE03_DLG", then it will work. I'd give it something extremely high, like 5000, just to be sure.
I'm not sure what it is in the themeroller CSS that causes this. They've probably changed or neglected the position attribute of the target div that it turns into a dialog.
I tried implementing a themeroller theme with a dialog and tabs and it turns out that the themeroller CSS doesn't work with official jQuery! Especially for dialog and tabs, they modified the element classes from the official jquery ones. See here:
http://filamentgroup.com/lab/introducing_themeroller_design_download_custom_themes_for_jquery_ui/
A user's comment:
3) the generated theme that I
downloaded seems to be incomplete -
when I attempt to use it my tabs
(which work with the flora theme, code
identical to the documentation
example) do not get styled as tabs
Having run into 3 I thought I was
stuck and would have to revert using
“flora"… I have since discovered by
reading the source code of the “demo”
file that if I adjust my html and give
the < li> items I’m using for my tabs
the “ui-tabs-nav-item” class then it
will work.
The theme generated by themeroller is
thus unfortunately incomplete. If the
tabs stuff is incomplete, it makes me
wonder what else is incomplete. It
was rather frustrating. :(
followed by the themeroller developers comment:
3) We’ll take a look at that. You’re right that those classes
should be added by the plugin. For now though, it probably
wouldn’t hurt much to just add them to your markup so you
can use themeroller themes.
We’ll check it out, though. I think our selectors could be
based off of the parent ui-tabs selector instead, but I think
we were trying not to use elements in our selectors. Consider
it on the to-do list
Man, this is a good one. I've tried doing a bunch of things on these two pages. Have you tried just leaving the CSS out altogether and trying both pages then? I used Firebug to remove the CSS from the header on both pages, and the input still worked on one and not on the other - but, I'm inclined to believe that Firebug doesn't completely remove the CSS from the rendering, and you'll get different results if you actually remove it from the code.
I also found that you can paste text into the text box using the mouse - it just won't accept keyboard input. There doesn't seem to be any event handler on it that would interfere with this, though.