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 :^)
Related
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
Alright, I thought I implemented this correctly, but I guess I must've goofed somewhere.
Here's my code:
Jquery here:
jQuery(document).ready(function( $ ){
$(function() {
$( ".cta-nav-hover" ).tooltip({
show: null,
position: {
my: "right+40 bottom",
at: "left bottom"
},
open: function( event, ui ) {
ui.tooltip.animate({ top: ui.tooltip.position().top - 10 }, 75 );
}
});
});
$(function() {
$(".fancybox").fancybox();
});
});
Then The HTML:
<div id="cta-nav-wrapper">
<ul id="cta-nav">
<li class="bio">
<span></span>
</li>
</ul>
</div>
I thought that this would work, but when I click the link, it just brings me to the placeholder image instead of making a popup. What did I do wrong? It looks as though i have the files lined up properly, or at least when i inspect them through firebug it goes to the proper js.
Here's what I called in the head:
<!-- Add fancyBox -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/content/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js"></script>
<!-- Optionally add helpers - button, thumbnail and/or media -->
<link rel="stylesheet" href="wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-buttons.js"></script>
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-media.js"></script>
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.css" type="text/css" media="screen" />
<script type="text/javascript" src="/wp-content/themes/hustle-child/includes/js/fancyapps-fancyBox-v2.1.5-0-ge2248f4/fancyapps-fancyBox-18d1712/source/helpers/jquery.fancybox-thumbs.js"></script>
<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="/wp-content/themes/hustle-child/includes/js/magnific-popup.css">
<!-- Magnific Popup core JS file -->
<script src="/wp-content/themes/hustle-child/includes/js/magnific-popup.js"></script>
I also tried another plugin called Magnific Popup but it's also unresponsive. I'm thinking it has something to do with my wordpress theme's set up.
This href="http://placehold.it/350x125" doesn't say to fancybox that you are opening an image so you either :
1). add the fancybox.image special class to your link like
<a class="cta-nav-hover fancybox fancybox.image" href="http://placehold.it/350x125" title="Bio"><span></span></a>
2). add the (HTML5) data-fancybox-type attribute to your link like
<a data-fancybox-type="image" href="http://placehold.it/350x125" title="Bio" class="cta-nav-hover fancybox"><span></span></a>
3). add the type option to your fancybox script like
$(".fancybox").fancybox({
type: "image"
});
whatever you think works better for your case.
NOTE: numbers 1). and 2). above work for fancybox v2.x only. Number 3). works for either v1.3.4 and v2.x
EDIT : included a JSFIDDLE with your code and jQuery v1.8.3.
There are two links :
one using "fancybox.image" class : working
other without : not working
I am doing a simple jquery-ui dialog application with my js,css code as,
<html>
<head>
<link rel="stylesheet" type="text/css" href="jquery-ui.css">
</head>
<body>
<div id="dialog">this is a dialog box</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
this jquery ui is added.....
<script>
$("#dialog").dialog()
</script>
</body>
</html>
When i add a simple dialog box, the x mark inside the dialog's close button is not visible.
Am i missing inclusion of any image sprite file?
Try this..
Include "sprite image" and if you put css file in project css folder means put image in image folder and add following changes
.ui-state-default .ui-icon {
background-image: url("images/ui-icons_888888_256x240.png");//change path of image in css(jquery-ui.css)
}
Alternatively, I think you have the bootstrap library. Some version of bootstrap and jquery-ui have conflict with the .button() method, and if your bootstrap.js is placed after jquery-ui.js, the bootstrap .button() overrides your jquery button and the jquery-ui 'X' image would then not show up.
This issue here might be helpful to know more!!
The below order works to showup your close button
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
The below causes issue
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
You can also run $.fn.button.noConflict() just before you call your dialog and everything should work fine!
Might be you have forget to include the sprite image
It looks very much like it wasn't able to load image resources for some reasons. Try to open your browser's network console and check it for any errors.
Perhaps it's trying to load the images from css/images/* rather than from the place that you're expecting for.
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.