I have this short sample:
link
CODE HTML:
Hover over me
asda
link exampe
do not understand why the W3Schools example is different from mine.
I put virtually the same code and have implemented bootstrap library.
Can you please tell me what the problem is and what example shows the two different?
They are using this code to attain that result unlike your one line of code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<a type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</a>
</div>
<script>$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
</script>
</body>
</html>
The important thing to note is this part
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
AND this API:
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
So I used their and found out that when you remove the above javascript code the result is same as yours. So add the above script element to your code and link the bootstrap js library and Bootstrap-combined.css.
To get the tooltip above the text use this code:
Hover
Doing so will give you the same result as there
For more reference use this link
Add data-placement attribute
Hover over me
Here is the bootstrap documentation for Tooltip
http://getbootstrap.com/javascript/#tooltips
Related
I am using JQueryUI with dialogextend on a boostrap template (Shards UI).
I have the issue that the dialog can move outside the window and makes scrollbars to the webpage:
Does anyone know what can cause this? I've tried to include the CSS and JS in different orders, but that doesn't help.
Here is the minimal code on which the issue still appears:
<!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, shrink-to-fit=no">
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">s
</head>
<body class="h-100">
<div id="testdialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<div class="container-fluid">
<div class="row">
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script>
$( function() {
$( "#testdialog" ).dialog({
resizable: true,
closeText: "",
height: "auto",
width: 400
});
$('.ui-dialog').css('z-index',9999);
} );
</script>
</body>
</html>
Thanks for the replies.
Solved it.
I was using a different version of the JS file and CSS file. Using the same version works.
On other html component like buttons or attribute data-toggle tool-tip with unique design are working fine see here link below as reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_tooltip&stacked=h
However If I'm going to implement to dynamic dropdown or simple component the design from the tooltip will be gone and it will become plain, something like this:
<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.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('[data-toggle="tooltip"]').tooltip();
});
</script>>
<select>
<option data-toggle="tooltip" title="Hooray1">Hooray1</option>
<option data-toggle="tooltip" title="Hooray2">Hooray2</option>
<option data-toggle="tooltip" title="Hooray3">Hooray3</option>
</select>
Any suggestion or comment how to have unique design tooltip on the dropdown. My aim is to have a tooltip with combination of text and image when the user hover for each value on the dropdown. TIA
As per bootstrap Documentation, you need to include popper.min.js before bootstrap.js for:
Tooltips and popovers for displaying and positioning (also requires Popper.js)
Dropdowns for displaying and positioning (also requires Popper.js)
Bootstrap Documentation: https://getbootstrap.com/docs/4.2/getting-started/introduction/#js
I got something similar to what you want, check here: https://stackoverflow.com/a/3314790/11171286
$('a[data-toggle="tooltip"]').tooltip({
animated: 'fade',
placement: 'top',
html: true
});
.avatar {
vertical-align: middle;
width: 50px;
height: 50px;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.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.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<a href="#" data-toggle="tooltip" title="<img class='avatar' src='https://www.w3schools.com/w3images/avatar5.png'/> <span><br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry.</span>">
Anonymous
</a>
why don't you try the latest bootstrap version but it's okay try this... Hope this will help
I have created a html page and used angular material for responsiveness but when i try to add a button using md-button it does not work but md-card is working fine.
I have included all the files shown below
Blockquote
<!DOCTYPE html>
<html>
<head>
<title>Image preview App</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.0/angular-material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body ng-app>
<md-card style="width:50%;height:300px;">
<md-button>button</md-button>
</md-card>
</body>
</html>
You are not seeing it because it does not get highlighted, apply a style
<md-card style="width:50%;height:300px;">
<md-button class="md-raised next-btn">button</md-button>
</md-card>
DEMO
Maybe your background is white and your button color is white. Try changing the color of one or the other.
<md-button style="color: #662D91;">button</md-button>
I´m trying to hide a foundation styled button, but the hidden attribute does not work.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="../css/foundation-5.5.1/css/foundation.css">
<script type="application/javascript" src="../js/jquery-1.11.1.min.js"></script>
<script type="application/javascript" src="../js/foundation-5.5.1/js/foundation.min.js"></script>
</head>
<body>
<div class="button success" hidden="true">Button</div>
</body>
</html>
How can I hide the button?
Instead using hidden="true" you may use the display="none" if you wanna make the div and the space that it ocupes disappear or you can use visibility="hidden" if u wanna make only the div disappear.
Display example: display="none"
Visibility example: visibility="hidden"
Try aria-hidden="true". Read other options here in tutorial:
http://foundation.zurb.com/docs/components/visibility.html
I have a mockup here
http://dummytest.herokuapp.com/
At the moment the plain vanilla HTML shows first and then it flickers and it is rendered with CSS applied. How can I get my page to show the CSS styling as the first thing completely bypassing the unstyled text?
Your document is not well formed (wiki), which is leading to this behavior.
Generally web pages go:
<html>
<head>
<!-- meta tags go here along with title,
script links, and css style references -->
</head>
<body>
<!-- elements for rendering go here -->
</body>
</html>
You would like to correct your HTML to comply with HTML standard:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Test Harness</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<!--<Le>HTML5 shim, for IE6-8 support of HTML elements</Le>--><!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]--><!--<Le>styles</Le>-->
<link href="/stylesheets/bootstrap.css" rel="stylesheet">
<link href="/stylesheets/datepicker.css" rel="stylesheet">
<link href="/stylesheets/style.css" rel="stylesheet">
<style>body {
padding-top: 30px; /* 60px to make the container go all the way to the bottom of the topbar */
}
</style>
<script src="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script src="/javascripts/slimScroll.min.js"></script>
<script src="/javascripts/housefix.js"></script>
<script src="/javascripts/bootstrap-transition.js"></script>
<script src="/javascripts/bootstrap-alert.js"></script>
<script src="/javascripts/bootstrap-datepicker.js"></script>
<script src="/javascripts/bootstrap-modal.js"></script>
<script src="/javascripts/bootstrap-dropdown.js"></script>
<script src="/javascripts/bootstrap-scrollspy.js"></script>
<script src="/javascripts/bootstrap-tab.js"></script>
<script src="/javascripts/bootstrap-tooltip.js"></script>
<script src="/javascripts/bootstrap-popover.js"></script>
<script src="/javascripts/bootstrap-button.js"></script>
<script src="/javascripts/bootstrap-collapse.js"></script>
<script src="/javascripts/bootstrap-carousel.js"></script>
<script src="/javascripts/bootstrap-typeahead.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
</head>
<body>
<p>
Home |
Log In
</p>
<h2>Welcome! Please log in.</h2>
</body>
</html>
Put all your <head></head> code in one place and all your <body></body> code in one place as well.
Currently you have 2 sets of <head> and <body>. Take the one above (with menu) and merge it with the one below (with welcome message).
It would be best to run all your webpages through http://validator.w3.org/ to avoid future problems like this.