How do I use tooltip plugin in twitter bootstrap's modal dialog? - html

all.
i am using bootstrap v2.1.1 (the newest version currently).
i need a tooltip in my modal dialog.
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<title>Bootstrap v2.1.1</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link type="text/css" rel="stylesheet" href="css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="css/bootstrap-responsive.min.css"/>
<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel='tooltip']").tooltip({'placement': 'right', 'z-index': '3000'});
});
</script>
</head>
<body>
<div class="modal modal-open">
<form class="modal-form form-horizontal">
<div class="modal-header">
<h3>Login</h3>
</div>
<div class="modal-body">
A link <!-- check it out -->
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Login</button>
<button type="reset" class="btn">Reset</button>
</div>
</form>
</div>
</body>
but the code does NOT work.
The lastest version of bootstrap shows the modal has a z-index of 1050.
and in bootstrap.min.css
.modal-open .modal .tooltip{z-index:2080;}
This is could not be z-index issue, i think.
anyone can help ? thx a lot.

Try add this into your CSS file:
.tooltip {
z-index: 2000 !important;
}

The behavior you are seeing is due to a bug introduced in Twitter Bootstrap 2.1.1 (see Issue #4980). The bug fix for it has already been committed to the 2.1.2-wip branch, and 2.1.2 should be coming out this coming week.
The problem stems from the fact that the tooltip is not being appended to the .modal element, but rather to the <body>. Rather than hacking on the CSS, I'd recommend the following workaround as a temporary hold over until the 2.1.2 is available.
$('.modal a[rel="tooltip"]')
.tooltip({placement: 'right'})
.data('tooltip')
.tip()
.css('z-index', 2080);
JSFiddle

Make sure you have done these:
<script type="text/javascript">
$(document).ready(function() {
$("a[rel='tooltip']").tooltip({'placement': 'right', 'z-index': '3000'});
});
</script>
The above is done. But what about the data-original-title attribute? You should give this:
A link
Found the issue: CSS Fix
.tooltip {z-index: 50000;}​
Demo: http://jsfiddle.net/zk7dF/1/

Works for me:
{
html: true,
placement: 'right',
container: '.modal-body',
title: ''
};

Now you can do that with Bootstrap3, finally!
Checkout http://getbootstrap.com/javascript/#modals

Related

Animate scrollTop laggy on Chrome only

Bootstrap 5.1.3 and jQuery 3.6.0
Animation not start immediately after click on Chrome, but works normally on other browser.
Sometimes the animation start after a while (maybe 500 ms) after click, sometimes it start with slow speed then as normal.
I tried this minimal code below and the problem still appears.
$(document).ready(function() {
$("#scroll-top").click(function() {
$("body,html").animate({
scrollTop: 0
}, 500);
});
});
<head>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="bg-secondary" style="height:2500px;"></div>
<p class="mb-0 text-center">Back to Top</p>
</body>
jsfiddle
I tried this code below (older version of Bootstrap 4.6.1), animation works normally.
So this problem may only appears on Bootstrap 5 and Chrome, I have no idea what caused it and how to fix it.
$(document).ready(function() {
$("#scroll-top").click(function() {
$("body,html").animate({
scrollTop: 0
}, 500);
});
});
<head>
<link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/css/bootstrap.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="bg-secondary" style="height:2500px;"></div>
<p class="mb-0 text-center">Back to Top</p>
</body>
jsfiddle
I submitted an issue on github and found the solution. issue
jQuery scroll script has conflict with scroll-behavior: smooth in _reboot.scss line 33. Just override it with css. solution
html {
scroll-behavior: auto !important;
}

Create Bootstrap Tooltip

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

angularjs ng-cloak is not working when page load

I am new to AngularJS and trying to fix the issue where some of the HTML code displays before ng-if condition gets evaluated. I am using ng-cloak as mentioned in many other stack over flow URLs but it still doesn't work for me. I am trying to load default image if actual image on URL is blank and when page loads, even if actual URL is there, it first blinks with default image and then loads the actual image because ng-cloak doesn't work correctly.
Please help.
I have below code and CSS etc.
Index.html
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<base href="/">
<title>Some App</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-resource.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-route.min.js"></script>
<script src="https://code.angularjs.org/1.4.7/angular-sanitize.min.js"></script>
<style type="text/css">
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
</style>
</head>
<body ng-app="app">
some code here
<div ng-view></div>
</body>
</html>
other.html
<div class="content">
<div style="width: 100px; height: 40px;">
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" ng-cloak>
<img src="image/default.png">
</div>
</div>
You can apply ng-cloak in your body tag. So, you whole body will be displayed only after angular's compilation.
<body ng-cloak ng-app="app">
..
</body>
This will solve your issue.
I did it always on my <html> tag. Like <html ng-app="someApp" ng-cloak>
The timeout function will do what you want:
// timeout function will give some time for page load.
$timeout(function () {
//your page load
$("#panelTask").html(res);
});
the best solution is to have a loader while your app is waiting for the data. Instead of putting the ng-if on the flickering element, put in on the parent component and show a loader (it could like FB does a sort of mock of your UI).
I had to add :
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
display: none !important;
}
to my css file for ng-cloak to work.
Like here :How to correctly use ng-cloak directive?
<div ng-if="image.small">
<img src="{image.small}}">
</div>
<div ng-if="!image.small" class="ng-cloak">
<img src="image/default.png">
</div>

Eonasdan Bootstrap Datetimepicker not working properly when I click on the calendar icon or input box

I'm having a problem with the Eonasdan Bootstrap datetimepicker. I copied and pasted the code from his website (minus the row and container because it made the layout of my panel messy). I suspect that the calendar is buried and not visible for some reason. I was hoping you guys could give me a hand!
<div class="col-sm-6">
<div class="form-group">
<div class="input-group date" id="datetimepicker1">
<input type="text" class="form-control active" />
<span class="input-group-addon btn">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$('#datepicker').off('focus').datepicker().click(
function () {
$(this).datepicker('show');
}
);
</script>
and here are my reference files so that you can see that I'm loading them properly.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/styles.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<link href="js/bootstrap.min.js">
<link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet">
<link href="js/bootstrap-datetimepicker.min.js">
<link href="js/moment.min.js">
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
I hope you can give me a hand! Thanks.
Firstly, you need to call jquery before all js files.
Second, the click function is working and you can see some part os calendar or you can't view nothing?
i don't know why you are using
$('#datepicker').off('focus')
try this out.
<script type="text/javascript">
$(function () {
$('#datetimepicker1').datetimepicker({
locale: 'ru'
});
});
</script>

Twitter BootStrap Checkbox Not Working

Currently I downloaded some CSS/JS files to make my check-boxes pretty (link found at end) and included them in my project. I am looking at his example code for making a check-box button, which is found under his example heading "Button Style". The colors seem to work great but only half of the checkbox is present (top half). I can't seem to figure out why the whole checkbox isn't displaying, but his example is working just fine.
Can someone help me figure out how to get his example working, so I can get a checkbox that toggles from red to green? completely new to bootstrap and help would be appreciated!
Link: http://montrezorro.github.io/bootstrap-checkbox/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Twitter Bootstrap</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-checkbox.css" rel="stylesheet">
<style type="text/css">
.bs-example{
margin: 20px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-checkbox.js"></script>
</head>
<body>
<div class="bs-example">
<form class="form-horizontal">
<div class="form-group">
<div class="col-xs-offset-2 col-xs-10">
<div class="checkbox">
<label><input type="checkbox" class = "style3"> Remember me</label>
</div>
</div>
</div>
<script>
$('input[type="checkbox"].style3').checkbox({
buttonStyle: 'btn-danger',
buttonStyleChecked: 'btn-success',
checkedClass: 'icon-check',
uncheckedClass: 'icon-check-empty'
});
</script>
</form>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
</body>
</html>
Edit: Sorry, I don't know how to get the files I downloaded off of the website I posted above on Jsfiddle. I am slapping code together. Obviously you will need to download the code off the website since I imported this. If anyone can tell me how to use jsfiddle while integrating new files, that would be great.