Using jquery qTip2 for tooltips.
I have a tooltip with a link in it. I want the tip to stay open if the user's mouse enters the tip (not the trigger). Can't seem to figure out how to do that in the documentation....
If you want it to remain visible when you mouse over and into the tip, but still want it to dismiss on mouseout, use the fixed and delay options as described in the documentation here:
$('.selector').qtip({
content: {
text: 'I hide on mouseout, but you can mouse into me within 500ms',
},
hide: {
fixed: true,
delay: 500
}
});
The hide parameter has many options. For example, if you just want to not hide it indefinitely, simply set hide to false:
$('.selector').qtip({
content: {
text: 'I never hide',
},
hide: false
});
If you want it to hide on a different event, such as clicking anywhere outside the tip, set the event explicitly:
$('.selector').qtip({
content: {
text: 'I hide when you click anywhere else on the document',
},
hide: {
event: 'unfocus'
}
});
If you want it to hide when the trigger is clicked, specify the click event:
$('.selector').qtip({
content: {
text: 'I hide when you click the tooltip trigger',
},
hide: {
event: 'click'
}
});
See specifically the "hide" options documentation for more info.
If you want the tip to stay open and then hide it when the user clicks outside the target or leaves the target:
show: {
event: 'mouseover'
},
hide: {
event: 'click mouseleave'
}
Related
Is there a way to display a modal dialog when user selects a tab in TabStrip component? The code below displays window.confirm, can not get modal dialog to display.
onTabSelected(e : any){
if (!window.confirm("Continue with navigation?")) {
e.prevented = true;
}
}
The dialog is not a direct substitute for window.confirm, because it cannot block the UI thread. To substitute the window.confirm with the Kendo UI dialog, you can prevent all tab selection, and wait for the dialog result:
onTabSelected(e: any) {
e.prevented = true;
this.dialogService.open({
content: "Continue with navigation?",
actions: [
{ text: "No" },
{ text: "Yes", primary: true }
]
}).result.subscribe((result) => {
if (result.primary) {
// change tab through code
this.tabStrip.selectTab(e.index);
}
});
}
See this plunkr for a working demo.
Ended up canceling the tab selection event, showing modal dialog, and resubmitting event based on the user answer.
I am trying to show a qtip when the user right-clicks on a node using the following code:
cy.on("cxttap", "node", function (evt) {
evt.cyTarget.qtip({
content: {
text: "test"
}
});
});
When I right-click a node no tooltip is shown, but as soon as I left-click on the same node then the tooltip shows.
I have made sure that cytoscape-qtip is working and I have not added any event handlers for the click or tap events.
qTip handles events itself, so you have to specify something like cxttap for the show event. If you want to write your own listeners, like you have above, then your call to qtip will need a call to the qtip API to manually show.
Set show property for right click
cy.elements().qtip({
content: '<p> [SUM Outgoing call :42, THUVAPPARA</p><button id="add-to-report" class="btn btn-success">Add to report</button><br><button class="btn btn-danger">Remove</button>',
show: { event: 'cxttap' },
position: {
my: 'top center',
at: 'bottom center'
},
style: {
classes: 'qtip-bootstrap',
tip: {
width: 16,
height: 8
}
}
});
I'm trying to add a colorbutton in a TinyMCE dialog box to replace my old color selector which was initially created with a select input.
See : ColorButton : API 4.X
This class creates a color button control. This is a split button in which the main button has a visual representation of the currently selected color. When clicked the caret button displays a color picker, allowing the user to select a new color.
I can add and see the new colorbutton in the dialog box but it doesn't show the colorpicker when clicked.
Here is my code:
editor.windowManager.open( {
title: 'Choose color',
body: [
{
type: 'listbox',
name: 'bg-color',
label: 'Color (select)',
'values': [
{text: 'White', value: '#FFF'},
{text: 'Black', value: '#000'},
{text: 'Silver', value: 'silver'},
]
},
{
type: 'ColorButton',
name: 'bg-color2',
label: 'Color (colorpicker)',
},
],
onsubmit: function(e) {
// Do something here
}
});
And you will find a tinymce fiddle here to illustrate this issue:http://fiddle.tinymce.com/sfeaab
Since my debugger doesn't show any JS error, is there something wrong in this code or is there another way to add a colorpicker in a dialogbox?
Thanks!
#MavBzh I think you've a wrong perception on how the color button works. The ColorButton UI is only help with rendering a button which not much difference with PanelButton UI. you can see this example http://fiddle.tinymce.com/sfeaab/3 in this fiddle I use textcolor plugin example.
So, in order to use color button you're required to specify the Panel to hold the color picker.
{
type: 'colorbutton',
name: 'color',
text: 'Color',
selectcmd: 'ForeColor',
panel: {
role: 'application',
ariaRemember: true,
html: renderColorPicker,
onclick: onPanelClick
},
onclick: onButtonClick
}
then later set onclick callback action and render the color picker HTML output yourself, the renderColorPicker function is used as the panel content, then assigned onPanelClick callback to put the color to the text placeholder in the ColorButton.
PS: in the fiddle I used v4.0.21
I created a context menu in my chome extension as a checkbox, I am successfull to create the menu which will be visible only for editable field.
The problem is I need to display menu as checked, according to a data attribute in the textfield(focused element). With the following code, it is displaying checked in a global level(means if i checked the menu in one page/elemebt is will remains checked for other page/elements as well.)
How can I make it checked/unchecked according to the element's data attribute ?
var addinMenu = chrome.contextMenus.create({
"title": "My Addin Menu",
"contexts": ["editable"]
});
var disableOrEnable = chrome.contextMenus.create({
"type": "checkbox",
"title": "Disable",
"parentId": addinMenu,
"id": "myaddin_disable",
"checked": true,
"contexts": ["editable"],
"onclick": disableOrEnableMyAddin
});
Call chrome.contextMenus.update() when the menu properties should change, e.g.:
chrome.contextMenus.update(
disableOrEnable,
{ type: 'checkbox', checked: false });
It looks like you can catch the oncontextmenu event and make changes that are immediately reflected in the posted menu (but I see from Rob W's comment there may be a race condition with that). This works for me:
var contextMenu = chrome.contextMenus.create(
{
type: 'checkbox',
title: 'how now brown cow',
checked: false,
contexts: ['all']
});
var element = document.getElementById('hello');
element.addEventListener(
'mouseover',
function(e) {
element.setAttribute('underMouse', 'true');
});
element.addEventListener(
'mouseout',
function(e) {
element.setAttribute('underMouse', '');
});
window.oncontextmenu = function(e) {
chrome.contextMenus.update(
contextMenu,
{
type: 'checkbox',
checked: element.getAttribute('underMouse') == 'true'
});
}
If you're just interested in the currently focused textfield you could also just change your menu in focus and blur events. You may also want to check out the 'editable' option to the contexts menu property (not sure what that does but sounds like it might restrict the menu to text input elements).
I have a JQuery Modal Form and when i add the submit event, it cannot display as dialog but rather than embedded into browser window. If I uncomment the click event below, it will embedded into browser window rather than show as dialog.
$(document).ready(function(){
//$("#moveTicketBtn").click() {
// $("#moveUnknownTicket").submit();
//};
$("#moveUnknownTicketDialog").dialog(
{
title: "Move Unknown Ticket",
autoOpen: true,
modal: true,
resizable: true,
stack: true,
width: 500,
height: 350
});
});
Does anyone have any idea why it is like this? Please help. Thanks.
EDIT Question:
I have a form inside this dialog and upon submission(onsubmit, onblur) the javascript is not called. What is the reason?
try
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
you have to insert your function within the () of the click event.
more information here: http://api.jquery.com/click/
That should do the trick:
http://jsfiddle.net/uQCKJ/
As you can see the form is submitted, since the alert box is triggered
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
I have put submit inside click function though works great.