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..)
Related
I'm having trouble with a click event on a sprite in CreateJS. The event isn't firing as expected. I've tried:
button.addEventListener("click", function() { alert('test'); });
and
button.on("click", function() { alert('test'); });
Neither of them fire on click event. Any ideas?
I found my problem. I forgot to enable the mouse on the stage.
e.g.
var stage = new createjs.Stage("canvasId");
//Children of container can dispatch mouse events
stage.mouseChildren = true;
//EaselJS checks 10 times per second what's under mouse pointer
stage.enableMouseOver(10);
CreateJS mouse events tutorial
I have disabled right click by adding the following code. However, when I navigate from one page to other, during that window of time, on right click, the right click menu is opening.
document.onmousedown = function (event)
{
event = (event || window.event);
if (event.button == 2 )
{
alert("right click");
}
}
You can use oncontextmenu for this:
document.oncontextmenu = function () {return false;}
This can happen for case if document.onmousedown = function (event) isn't yet executed for some reason. Among reasons can be errors in java script or browser yet didn't execute document.onmousedown = function (event) because it is in process of executing some other javascript code.
Another proposal for consideration can be another way of disabling:
<body oncontextmenu="return false">
i am working in extjs4. i have form panel with autoscroll true. I have 20-25 fields with fileUpload field at bottom. When i am uploading file, form's scroll is going to top by default. i want to keep scroll of form as it is on where it was while uploading file. So how to set this scrollBar at bottom of or at upload field section in extjs4
You can try by adding the following method to your form declaration:
scrollToField: function(fieldId) {
var field = Ext.get(fieldId);
field.el.scrollIntoView(this.body.el);
}
Here you have a working sample
IMHO,it will be better, however, to group fields using tabs or something similar to avoid having a long a and hard to read / fill form
I have solve this problem into Ext js 4.2 for Ext.form.panel
See the following code. It will helpful to you.
onRender function call on render event
onRender: function () {
this.callParent(arguments);
if (!this.restoreScrollAfterLayout) {
this.mon(Ext.get(this.getEl().dom.lastElementChild), 'scroll', this.onScroll, this);
this.restoreScrollAfterLayout = true;
}
},
onScroll: function (e ,t, eOpts) {
this.scroll = Ext.get(this.getEl().dom.lastElementChild).getScroll();
},
afterLayout: function () {
this.callParent(arguments);
if (this.restoreScrollAfterLayout && this.scroll) {
var el = Ext.get(this.getEl().dom.lastElementChild),
scroll = this.scroll;
el.scrollTo('left', scroll.left);
el.scrollTo('top', scroll.top);
}
}
When FloatingPane change size, I would like to launch a function.
I think there is something with resizeHandle but not know how to do.
I use Dojo 1.8+.
Thanks
Indeed, you have to define an event handler for the resize handler of your floating pane.
For example:
require(["dojo/on"], function() {
var floatingPaneObj = ...;
...
floatingPaneObj.startup();
on(floatingPaneObj._resizeHandle, "resize", function(e) {
// Your event handler
});
});
I also made a working JSFiddle to demonstrate it. http://jsfiddle.net/8azsz/2/
I am trying to set a hidden form field with the value of a selected radio button. I have the following code:
$(function () {
// set hidden form field with selected timeslot
$('input[name=["timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
});
All radio buttons have the name "timeslot", and I would like to run this function whenever one is clicked. However, the alert box shows blank when I click one of the radio buttons.
UPDATE: Oops! Didn't see the double square brackets. However I fixed it:
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
and I am STILL having the same problem. In fact, the alert box does not even come up any more for some reason.
UPDATE 2: Actually, in my real code I have other events registered in my initiation block besides this one -- if I take out all of them except for the radio button one, it works!
For example, if I have this:
$(function () {
// set hidden form field with selected interviewee
$('#interviewees').live("change", (function () {
var selected = $("#interviewees").val();
$("#selectedInterviewee").val(selected);
}));
// set hidden form field with selected timeslot
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
});
then the radio button click event does NOT fire, though the first one (a dropdown list) does. But if I have the radio button one all by itself, it does. Any ideas????
The input tags look like this:
<input id="slot_7:30-AM" name="timeslot" type="radio" value="slot_7:30-AM" />
I am using IE 8 mostly, but I tried this on Firefox and the same thing happened. What am I doing wrong?
Without seeing your html, I can't be totally sure, but I'm thinking the problem is the selector you're using:
$('input[name=["timeslot"]')
There are at least two problems that might cause issues:
the unclosed square-bracket, and
the use of square brackets inside the attribute selector. Try using: $('input[name="timeslot"]') instead.
Edited in response to comments to the answer, below.
The following seems to work:
$('input[name="timeslot"]').live('click', function() {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
});
JS Fiddle demo.
I am, of course, using a text input, rather than a hidden, but since the selector works on the id it should work regardless of the input type.
OK I got it to work by REVERSING the order of the event registrations:
$(function () {
// set hidden form field with selected timeslot
$('input[name="timeslot"]').live("click", (function () {
var valu = $(this).val();
alert(valu);
$("#selectedSlot").val(valu);
}));
// set hidden form field with selected interviewee
$('#interviewees').live("change", (function () {
var selected = $("#interviewees").val();
$("#selectedInterviewee").val(selected);
}));
});
Ugh. I'm returning to my view that javascript is a flakey mess. But for whatever reason, it does work now. (Both of them work now ... very peculiar.)