Develop Reference

Bootstrap Tour - Force hover on element

{
element: ".tour-step.tour-step-2",
placement: "rig",
title: "Datamodel",
onShown: function (tour) {
let showmodell = document.getElementById('step1');
$(showmodell).trigger("mouseover");
},
content: 'Here you will find...'
},
<li class="tour-step tour-step-2" id="step1">
...
</li>
Im trying to force a pseudo class on an element when step1 of the tour is triggered.
Thank you for any help

Pete's suggestion solved my question:
{
element: ".tour-step.tour-step-2",
placement: "top",
title: "Datamodel",
onShown: function (tour) {
let showmodell = document.getElementById('step1');
$(showmodell).css("display", "block");
},
content: 'Here you will find...'
},
Would like to know why triggering a "mouseover" doesn't work in this case, though.

FullCalendar tooltip bug when dragging event in Resource timeline

I'm using JavaScript FullCalendar library to build my calendar. Now updating my codes to work with FullCalendar V4. When Dragging event in resource timeline view, the tooltip does not work as expected (duplicate tooltips show when dragging). This issue only happens in resource timeline view, not in dayGrid view. I've attached two codepen codes. Daygrid view works fine, but Resource timeline view does not.
https://codepen.io/nmwangxin/pen/WNeRQaX
https://codepen.io/nmwangxin/pen/qBWROKz
eventRender: function(info) {
var tooltip = new Tooltip(info.el, {
title: 'test',
placement: 'top',
trigger: 'hover',
container: 'body'
});
},

When dragging the event it gets re-rendered each time, so basically you are recreating a new tooltip each time thus creating multiple instances which in turn loose their reference to the element that gets destroyed hence it's odd placement.
I would suggest to hook into "eventMouseEnter" and "eventMouseLeave" callbacks and create and destroy a single tooltip object there.
Here is an example:
var tooltip = null;
eventMouseEnter: function(info) {
tooltip = new Tooltip(info.el, {
title: info.event.title,
placement: 'top',
trigger: 'hover',
container: 'body'
});
},
eventMouseLeave: function(info) {
if (tooltip) {
tooltip.dispose();
}
}
https://codepen.io/alex-hazanov/pen/rNBjPyL

Or use bootstrap's tooltip like this :
eventMouseEnter: function (info) {
$(info.el).tooltip({
title: info.event.title + '<br />' + info.event._instance.range.start,
html: true,
placement: 'top',
trigger: 'hover',
container: 'body',
});
}

extjs 6.5.2 modern - beforeremove, beforeclose, close not firing

I've noticed that tabpanel's beforeremove and panel's beforeclose and close are not firing. On the other hand destroy event is working fine. Are there any workarounds or different events with the same results?
I've reproduced my observation at the example below.
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.TabPanel', {
fullscreen: true,
tabBarPosition: 'bottom',
items: [
{
xtype: 'panel',
title: 'Home',
iconCls: 'home',
html: 'Home Screen',
closable: true,
listeners: {
beforeclose: function () {
console.log('beforeclose');
},
close: function () {
console.log('close');
},
destroy: function () {
console.log('destroy');
}
}
},
{
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}
],
listeners: {
beforeremove: function () {
console.log('beforeremove');
}
}
});
}
});
Just add the example to sencha fiddle in Modern toolkit and open your browser's developer tools.
Also, beforeclose and close are firing fine if the panel is not inside a tabpanel.
Ext.create({
xtype: 'panel',
title: 'Panel Title',
iconCls: 'x-fa fa-html5',
height: 400,
width: 400,
bodyPadding: 12,
html: 'Sample HTML text',
renderTo: Ext.getBody(),
listeners: {
beforeclose: function () {
console.log('beforeclose');
},
close: function () {
console.log('close');
}
}
}).close();
UPDATES
-- It's a framework bug. So probably i'll have to wait for an update.
-- I accepted Marco's answer because it solves my issue. But it's a framework bug that it should be fixed in the next update.

Demo here: https://fiddle.sencha.com/#view/editor&fiddle/29dj
TL;DR listen to "deactivate" and "removed" events.
The user click happens on tab's bar (Ext.tab.Bar) and not on your panel, and the bar is part of Ext.tab.Panel (which extends Ext.Container).
Therefore the method called to close your tab is "onItemRemove" of Ext.tab.Panel, and not "close" of Ext.Panel.
This is the reason why your listeners don't work.
With the demo fiddle you can see all the events being fired by your Ext.Panel and use those events to do what you need.
EDIT
To show a confirmation message before closing here's the fiddle: https://fiddle.sencha.com/#view/editor&fiddle/29hl

how to give default alert function behaviour to qtip 2 alert

I am using qtip2 for displaying the alert messages for my web application ( as shown at http://craigsworks.com/projects/qtip2/demos/#dialogues )
my code is
1) for dialogue
function dialogue(content, title) {
/*
* Since the dialogue isn't really a tooltip as such, we'll use a dummy
* out-of-DOM element as our target instead of an actual element like document.body
*/
$('<div />').qtip(
{
content: {
text: content
, title: {
text: 'PMGSY ',
button: 'Close'
}
},
position: {
my: 'center', at: 'center', // Center it...
target: $(window) // ... in the window
},
show: {
ready: true, // Show it straight away
modal: {
on: true, // Make it modal (darken the rest of the page)...
blur: false, // ... but don't close the tooltip when clicked
escape: false
}
},
hide: false, // We'll hide it maunally so disable hide events
style: {
classes: 'qtip-shadow qtip-rounded qtip-dialogue', // Optional shadow...
widget: true //themeroller
},
events: {
// Hide the tooltip when any buttons in the dialogue are clicked
render: function (event, api) {
$('button', api.elements.content).click(api.hide);
},
// Destroy the tooltip once it's hidden as we no longer need it!
hide: function (event, api) { api.destroy(); }
}
});
}
2) to call it as alert
function Alert(message) {
// Content will consist of the message and an ok button
var message = $('<p />', { text: message }),
ok = $('<button />', { text: 'Ok', 'class': 'full' });
dialogue(message.add(ok), 'Alert!');
}
the problem is when i use it ,its does not block the further processing until user click on ok button (like default alert function).
e.g this alert does not even show up.
Alert("Customised alerts"); //this doesent show
window.location.replace("/Home/startPage");
how to make my custom alert mimic the default alert function ?
Please help

Replace
ok = $('<button />', { text: 'Ok', 'class': 'full' });
with
ok = $('<button />', { text: 'Ok', 'class': 'full' }).click(function(){
window.location.replace("/Home/startPage");
});

How to "reset" click event (with qtip2)?

I have a little question about the click event and qtip2.
After the first click on element $j('a[href^="/i/"]'), when I move again over it, the bubble appears. I would like that the bubble appears everytime I click on the element.
My code:
$j('a[href^="/i/"]').click(function(event) {
event.preventDefault();
$j(this).qtip({
content: {
title: {
text: title_qtip,
button: true,
},
text: text_qtip,
},
show: {
// event: false, <-- doesn't work
solo: true,
ready: true
},
hide: false,
});
// $j('a[href^="/i/"]').unbind('click'); <-- doesn't work
// $j('a[href^="/i/"]').unbind('onmouseover').unbind('onmouseout'); <-- doesn't work
});

First of all, don't declare your qTip2 function inside of an event handler. You don't want to declare a new qTip every time the object is clicked. All you have to do is change the event line in the show function. It should be:
$j(document).ready(function(){
$j('//selector').qtip({
content: {
title: {
text: title_qtip,
button: true,
},
text: text_qtip,
},
show: {
event: 'click',
solo: true,
ready: true
},
hide: false,
});
}
This will trigger the tool tip when the selector ($j(//your selector)) is clicked on.
Here is an updated fiddle: http://jsfiddle.net/LJwLh/1101/
It seem that your problem is the use of an a tag. There is no reason to use that tag if you are not going to link to anything.