I have a Bootstrap 3 button with a tooltip. When clicking the button the tooltip shows and then fades out. When clicking a 2nd time the tooltip flickers and does not nicely fade out. But when clicking the 3rd time the behavior is like expected again.
Update: The below code works fine with Bootstrap 3.0.0, but not with Bootstrap 3.3.7.
$('[data-toggle="tooltip"]').tooltip({
trigger: 'click',
placement: 'bottom'
});
function setTooltip(node, message) {
node.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(node) {
setTimeout(function() {
node.tooltip('hide');
}, 1000);
}
$('.btn').on('click', function() {
var node = $(this);
var msg = node.attr('data-title');
setTooltip(node, msg);
hideTooltip(node);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type='button' class='btn btn-primary' data-title='Tooltip' data-toggle='tooltip'>Click me</button>
You should use trigger: 'manual' so you can control how the tooltip is shown or hidden.
$('[data-toggle="tooltip"]').tooltip({
trigger: 'manual',
placement: 'bottom'
});
function showTooltip(node) {
node.tooltip('show');
}
function hideTooltip(node) {
setTimeout(function() {
node.tooltip('hide');
}, 1000);
}
$('.btn').on('click', function() {
var node = $(this);
showTooltip(node);
hideTooltip(node);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary" data-title="Tooltip" data-toggle="tooltip">Click me</button>
Here you with a solution
$('.btn').on('click', function() {
var node = $(this);
var msg = node.attr('data-title');
node.attr('data-original-title', msg)
.tooltip('show');
setTimeout(function() {
node.tooltip('hide');
}, 1000);
});
$('.btn').on('mouseleave', function() {
$(this).tooltip('hide');
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type='button' class='btn btn-primary' data-placement='bottom' data-title='Tooltip' data-toggle='tooltip' data-trigger='manual'>Click me</button>
Hope this will help you
Related
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.5.10/clipboard.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<button class="btn btn-primary" data-clipboard-text="It worked!">Click me</button>
<button class="btn btn-primary" data-clipboard-text="It worked again!">Click me</button>
<label><input type="checkbox" name="name0" value="TOD-77">TOD-77</label>
<i id="copyFh" class="fa fa-copy"></i>
<script type="text/javascript">
// Tooltip
$('button').tooltip({
trigger: 'click',
placement: 'right'
});
function setTooltip(btn, message) {
$(btn).tooltip('hide')
.attr('data-original-title', message)
.tooltip('show');
}
function hideTooltip(btn) {
setTimeout(function() {
$(btn).tooltip('hide');
}, 1000);
}
// Clipboard
var clipboard = new Clipboard('button');
clipboard.on('success', function(e) {
setTooltip(e.trigger, 'Copied!');
hideTooltip(e.trigger);
});
clipboard.on('error', function(e) {
setTooltip(e.trigger, 'Failed!');
hideTooltip(e.trigger);
});
</script>
this code will work ok in clipboard.js 1.5.10, but it will not work in clipboard.js 2.0（<script src="https://cdn.jsdelivr.net/npm/clipboard#2.0.10/dist/clipboard.min.js"></script>. No copy & no tooltip.
How can I get it to work under clipboard 2.0?
In addition, how can the li button copy the value of name="name0" input and give the same tooltip?
My home page is running three.js and I am using barba.js to use ajax for smoother transitions between pages. The problem is that after I have gone back and forth away from the home page and back to it a few times my site starts to run extremely slowly. I am trying to think of a way around this and I thought I had one using barba.js Views and a requestAnimationFrame, however I don't think it helped enough. Does anyone have a better idea of how to either destroy or stop executing my three.js function?
barbaMain.js
document.addEventListener("DOMContentLoaded", function () {
var lastElementClicked;
let animationLoop = null
const SingleNews = Barba.BaseView.extend({
namespace: 'single-news',
onEnterCompleted: function () {
animationLoop = requestAnimationFrame( doThree )
},
onLeave: function() {
cancelAnimationFrame(animationLoop)
},
});
SingleNews.init()
Barba.Pjax.start();
Barba.Dispatcher.on('linkClicked', function(el) {
lastElementClicked = el;
});
var FadeTransition = Barba.BaseTransition.extend({
start: function() {
Promise
.all([this.newContainerLoading, this.fadeOut()])
.then(this.fadeIn.bind(this));
},
fadeOut: function() {
return $(this.oldContainer).animate({
opacity: 0
}, 400, function() {} ).promise()
},
fadeIn: function() {
var _this = this;
var $el = $(this.newContainer);
$(this.oldContainer).hide();
$el.css({
visibility: 'visible',
opacity: 0
});
$el.animate({
opacity: 1
}, 400, function() {
_this.done();
});
}
});
Barba.Pjax.getTransition = function() {
return FadeTransition;
};
})
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Jacob Truax Portfolio</title>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="canvas-fix">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=IBM+Plex+Mono" rel="stylesheet">
<script src="three.min.js"></script>
<script src="portfolio.js"></script>
<script src="jquery-3.3.1.min.js"></script>
<script src="barba.js"></script>
<script src="barbaMain.js"></script>
</head>
<body>
<div id="barba-wrapper">
<div class="barba-container" data-namespace="single-news">
<header>
<a class="home" href="#">Jacob Truax</a>
<a class="contact" href="info.html">Info</a>
<a class="info" href="#">Work</a>
</header>
<section class="three"></section>
</div>
</div>
</body>
Three.js functions are all inside this:
const doThree = function () {}
How can I check the value of a progress bar in jQuery?
Lets say that I push a button and it goes to 50% and if I push the button of 25% i would like to get an alert which says "You cant go under 50%"
<!DOCTYPE HTML>
<html>
<head>
<link rel="shortcut icon" href="../test/pics/bbti.png" />
<title>Bing Bang Theory</title>
<link rel="stylesheet" type="text/css" href="../test/css/style2.css">
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
</head>
<body>
<h1>bbt</h1>
<!--progress bar start-->
<div id="progressbar"></div>
<br />
<button onclick="set25()">Set to 25%</button>
<button onclick="set50()">Set to 50%</button>
<button onclick="set75()">Set to 75%</button>
<button onclick="set100()">Set to 100%</button>
<script>
$(function() {
$("#progressbar").progressbar({
value: 0
});
});
// Set progressbar to 25%
function set25() {
//somewhere here is the code about if statement.
$("#progressbar").progressbar("option", "value", 25);
}
// Set progressbar to 50%
function set50() {
$("#progressbar").progressbar("option", "value", 50);
}
// Set progressbar to 75%
function set75() {
$("#progressbar").progressbar("option", "value", 75);
}
// Set progressbar to 100%
function set100() {
$("#progressbar").progressbar("option", "value", 100);
}
</script>
<!--progress bar stops-->
</body>
</html>
Can you help me solve it?
Thanks.
Instead of having multiple functions like set25, set50 ... have a single function and send values to it. Something like this
function set(progressBarValue){}
And call it like this
<button onclick="set(25)">Set to 25%</button>
<button onclick="set(50)">Set to 50%</button>
<button onclick="set(75)">Set to 75%</button>
<button onclick="set(100)">Set to 100%</button>
In order to get the current value of a progress bar you can do this
$("#progressbar").progressbar("option", "value");
Overall it should look something like this
var myprogressbar;
$(document).ready(function () {
myprogressbar = $("#progressbar").progressbar({
value: 0
});
});
function set(val) {
var currVal = myprogressbar.progressbar("option", "value");
if(currVal > val){
alert('Cannot go lower');
return;
}
myprogressbar.progressbar("option", "value", val);
}
Here is a demo http://jsfiddle.net/dhirajbodicherla/NAs3V/381/
You can use one single function to perform the operations. And you can avoid inline JS which can be a nightmare to maintain.
$(function () {
$("#progressbar").progressbar({
value: 0
});
$('button[data-value]').on('click',function() {
var pbar = $('#progressbar'),
value = $(this).data('value'),
curValue = pbar.progressbar('value');
if( value < curValue ) {
alert("You can't go under " + curValue +"%!");
} else {
pbar.progressbar( 'value', value );
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<div id="progressbar"></div>
<br />
<button data-value="25">Set to 25%</button>
<button data-value="50">Set to 50%</button>
<button data-value="75">Set to 75%</button>
<button data-value="100">Set to 100%</button>
I have the following code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/tau.css">
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
</head>
<body onload="clickButton();">
<div class="ui-page" id="page_webkitui">
<header class="ui-header">
<h2 class="ui-title">Webkit UI demos</h2>
</header>
<div class="sample">
<input type="time" id="input_webkitui_hiddentime"
style="visibility: hidden; width: 50px"></input>
<div>
Hidden time:
<button class="ui-btn" id="button_webkitui_hiddendateopener"
style="display: block" onclick="alertTime()">Open timepicker</button>
<span id="webkitui_hiddentime_value"></span>
</div>
<script>
function alertTime() {
alert("fff");
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.click();
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
}
function clickButton() {
$(function() {
document.getElementById('button_webkitui_hiddendateopener').click();
//$('#button_webkitui_hiddendateopener').click();
});
}
(function() {
var page = document.getElementById("page_webkitui");
page.addEventListener(
"pagecreate",
function(ev) {
var btn = document.getElementById("button_webkitui_hiddendateopener"),
itime = document.getElementById("input_webkitui_hiddentime"),
val = document.getElementById("webkitui_hiddentime_value");
btn.addEventListener("click", function(e) {
itime.click();
});
itime.addEventListener("change",function(ev) {
val.innerText = itime.value;
});
});
}());
</script>
</div>
</div>
<script type="text/javascript" src="js/tau.js"></script>
</body>
</html>
I want to "force" the button_webkitui_hiddendateopener button to be clicked once my page is loaded... (a timepicker is shown normally as a new window).
I implement two functions clickButton() and alertTime(), as a result: only the ffff alert is shown but the new window of the timepicker didn't show up.
What's wrong?
Thanks in advance!
$(document).ready( function() {
$('#button_webkitui_hiddendateopener').trigger("click");
});
Use trigger http://api.jquery.com/trigger/
Live Demo
I want to show a message using bootstraps tooltip when the user enters more than 50 000 in an input.
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css"/>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(this).tooltip("hide");
$("#myInput").on("keyup", function() {
console.log(this.value);
if (this.value > 5000) {
$(this).tooltip("show");
$(this).val(50000);
} else {
$(this).tooltip("hide");
}
}).tooltip({
placement: "right",
trigger: "focus"
});
});
</script>
</head>
<body>
<input id="myInput" title="You cannot enter more than 50 000" />
</body>
</html>
or see http://jsfiddle.net/Ljxz2/
The problem is that tooltip is triggering the message on focus (I think), so the message is shown when the user clicks (or focuses) the input. How do I turn that off?
Just change the value of "trigger" in the options sent in the tooltip function call to "manual".
tooltip({
placement: "right",
trigger: "manual"
};
http://jsfiddle.net/YcQat/