Is there any default method to hide tooltip after a few seconds on click?
I want to show it on click for 2 sec and then close it. how should i do this?
You need to set a timeout when the tooltip is first shown. I also like to add hideOnClick: false so that it doesn't disappear when they click somewhere else.
Here's a complete example for you:
tippy('#button', {
trigger: 'click',
hideOnClick: false,
onShow(instance) {
setTimeout(() => {
instance.hide();
}, 2000);
}
});
Related
https://bootstrap-vue.js.org/docs/components/alert/
I am trying to show an alert on a button click for a second and hide it away, then show it again when button is clicked again,
<b-alert :show="saved" >Default Alert</b-alert>
..
clicked() {
//1 sec delay
this.saved = 1
}
I was hoping this would show the alert and reset the "saved" to 0 or something so when I click the button it would show again, I even tried to set the value to 0 after the click but no avail.
In their other examples they have done similar things with additional methods like 'countDownChanged','showAlert', I just want to know if that can be done without that.
Any help is appreciated.
Please refer the following code. Its working fine for me.
<button #click="test">lalala</button>
<b-alert :show="showvar" >Default Alert</b-alert>
data: {
showvar:false,
sec:1000
},
methods: {
test: function() {
console.log("hi")
let self = this;
self.showvar=true
setTimeout(function(){ self.showvar=false; }, self.sec);
}
}
codepen - https://codepen.io/anon/pen/QoeNro
I noticed when using Owl Carousel 2, while slide the item in mobile viewing, the browser also can be move up and down. Try to disabling the scroll function when trigger the Owl Carousel 2 prev and next function in mobile but it still doesn't work.
$('.owl-carousel').owlCarousel({
loop:true,
margin:5,
nav:true,
items:2,
});
// $('.owl-carousel').bind("mousewheel", function() {return false;});
$('.owl-carousel').bind('touchmove', function(e){e.stopPropagation(); alert('allow scroll');});
Appreciated the answer from expert out here.
Thank you.
I made this work with the help of OwlCarousel2 events.
There are 2 events we can use together for this purpose:
drag.owl.carousel fires when user start to drag
dragged.owl.carousel fires when dragging finished
And this make it work like how we want it:
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
});
owl.on('drag.owl.carousel', function(event) {
$('body').css('overflow', 'hidden');
});
owl.on('dragged.owl.carousel', function(event) {
$('body').css('overflow', 'auto');
});
So; it use css overflow to disable scrolling when dragging started and enables it back when it finished.
This works on iOS & VueJS.
var owl = $('.owl-carousel');
owl.owlCarousel({
// your options
})
// disable scroll
owl.on('drag.owl.carousel', function(event) {
document.ontouchmove = function (e) {
e.preventDefault()
}
})
// enable scroll
owl.on('dragged.owl.carousel', function(event) {
document.ontouchmove = function (e) {
return true
}
})
look for the below piece of code in custom.js file of your project
Owl.Defaults = {
items: 3,
loop: false,
center: false,
rewind: false,
mouseDrag: true,
touchDrag: true,}
change the things to below:-
touchDrag:false,
and owl-carousel will simply stop scrolling horizontally both on mobile and desktop drag!
For owlcarousel2, you can use mouseDrag option.
$('.owl-carousel').owlCarousel({
mouseDrag:false
});
Reference https://owlcarousel2.github.io/OwlCarousel2/docs/api-options.html
in owl.js
mouseDrag: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
I'm using the Tooltip() from Twitter-Bootstrap. When hovered over an element, a tooltip shows up. But it stays there unless you move your mouse away from it.
How can I make it dissapear after a few seconds it popped up, in stead of waiting until mouse moves away from the element?
Bootstrap provides methods for manipulating tooltips such as $('#element').tooltip('hide')
If you add the data-trigger='manual' attribute to your elements, you can control how the tooltip is shown or hidden.
$('.bstooltip').mouseenter(function(){
var that = $(this)
that.tooltip('show');
setTimeout(function(){
that.tooltip('hide');
}, 2000);
});
$('.bstooltip').mouseleave(function(){
$(this).tooltip('hide');
});
Fiddle
If multiple mouseEnter and mouseleave event happen within delay time 'hide' is called multiple times and may be the tooltip closes earlier than expected. Older calls must be discarded.
$('.bstooltip').on('shown.bs.tooltip', function () {
var that = $(this);
var element = that[0];
if(element.myShowTooltipEventNum == null){
element.myShowTooltipEventNum = 0;
}else{
element.myShowTooltipEventNum++;
}
var eventNum = element.myShowTooltipEventNum;
setTimeout(function(){
if(element.myShowTooltipEventNum == eventNum){
that.tooltip('hide');
}
// else skip timeout event
}, 2000);
});
Fiddle
setTimeout would only work once for the first tooltip, we need to use setInterval instead.
This works for me perfectly fine with Bootstrap 4 Tooltips
$(document).ready( function () {
$('[data-toggle="tooltip"]').tooltip();
setInterval(function () {
$('[data-toggle="tooltip"]').tooltip('hide');
}, 2000);
});
The tooltip would appear and disappear after 2 seconds.
Here is simple Answer
$(selector).tooltip({title:"somthing~", trigger:"hover", delay:{hide:800}, placement:"top"});
only give hide parameter in delay option.
it work fine also focus event not click event(I don't know why..)
How submit a Kendo Upload file in async mode with a external button using javascript,
it's possible?
someone have a solution for this?
After initially selecting a file, KendoUpload will create a button you can select with $(".k-upload-selected"). Calling click on this button will POST back to your saveUrl setup in the async options. You will need to set autoUpload: false.
On select in kendUpload, you can access the Kendo generated upload button, hide it then trigger the click event in myUploadButton's click.
My original code was inside a Backbone view. Just to simplify I pulled it out. I haven’t tested the code below, however it should be fairly close to what you need.
var myUploadButton = $("#save");
var kendoUploadButton;
$("#files").kendoUpload({
async: {
saveUrl: http://uploadurl",
autoUpload: false,
},
multiple: false,
select: function (e) {
setTimeout(function () {
kendoUploadButton = $(".k-upload-selected");
kendoUploadButton.hide();
}, 1);
}
});
myUploadButton.click(function() {
if(kendoUploadButton)
kendoUploadButton.click();
});
Kendo Forum post on KendoUpload Trigger
Can someone help me to make editable cell "visible", so it could be clear it can be edited? Right now it looks like a simple text and nothing visually suggests, that it can be edited...I´d like to make it look like a standard text field.
This should work:
var oTable = $('#example').dataTable( {
"bServerSide": true,
"sAjaxSource": "/url/",
"fnDrawCallback": function () {
$('#example tbody td').editable( 'url', { // simple editable initialization
"height": "14px",
});
$('#example tbody tr').each(function() {
$.each(this.cells, function(){
$(this).click() //by default all td's have bind for click function, so we simulate clicks for every td
});
});
$('#example tbody td input').live('click', function(){
$(this).select() // to select input
})
}
});
$.editable.types.defaults.reset = function (){ //this function disables reset input editing after submiting
}
UPDATE:
I made a test sample here http://jsfiddle.net/94BZV/31/
Don't forget to put correct url in init of editable to get correct answer passed back to edit field.
are you want this in ASP.net or what? if yes then,if your text is in GridView then you have to set EDITINDEX Value to the rowindex value of the list,as if the EDITINDEX value is -1 then it is static mode then every thing will be displayed in label so you should change it value to Greater Than >-1 Then The Controls will be displayed in TextBoxes So then You can edit the Value in the Controls"