I would like to have a qtip2 tooltip without a title bar, but with a close icon in the corner. Is there a way to spec that, or do I have to muck with the code that creates it? I am thinking of something that floats the button to the left or to the right, allowing the rest of the content to fill the tooltip div.
Always keep the close markup separately and update with your current qTip Text.
$('.selector').qtip({
content: {
text: function(api) {
var qTipContent = $('.close-markup').html();
qTipContent += $('.qtip-content').html();
return $('.qtip-content').html();
}
}
});
$('.close-markup').qtip('destroy');
Try the above code.
Note: Does not require to muck the qTip Close code snippet!
Related
I'm using the d3 library to create a widget within a SVG. Within the SVG I'm trying to do the following:
There are small rectangles that are clickable. Once clickable, they should "enlarge" and show some input fields. When I click outside the rectangles I want them to "un-enlarge" and remove the input fields again.
Small rectangle:
Once clicked, they enlarge (no input fields yet):
When I click outside of the white rectangle, I want it to revert back to picture 1:
I trigger the enlargement with an on click event:
let whiteRect = node.append("g")
.on('click', function(a) {
// Trigger enlarge function
return a;
})};
And I would like to trigger the "click outside" using a blur or focusout event. But this doesn't seem to work for SVG. Something like this:
let whiteRect = node.append("g")
.on('blur', function(a) {
// Trigger "un-enlarge" function
return a;
})};
I've been doing some searching, and it seems that in SVG 2 this might be supported, but this doesn't seem to be implemented by any browsers.
Anyone have an idea how I could implement this? I know I can add an onclick event listener for the whole SVG and write some logic there to identify if I'm clicking on an enlarged rectangle. But I'd prefer using something easier like blur or focusout if possible. Any ideas?
Shortly after posting I found this tutorial on focusing svg elements: https://allyjs.io/tutorials/focusing-in-svg.html
Turns out if you add a focus event to an element it becomes focusable and also gets a blur event. So what I did was add an empty focus event to be able to use the blur.
let whiteRect = node.append("g")
.on('click', function(a) {
// Trigger enlarge function
return a;
})}
.on('focus', function(a) {
// Empty focus event
return a;
})}
.on('blur', function(a) {
// Trigger un-enlarge function
return a;
})};
Which worked for me.
I developed an app using Xamarin forms that has side menu see this url.
But I couldn't use this in my current project, so I made my custom component for side menu.
How to implementing feature that hide menu when I tap range out of side menu?
It is hard to give you any help without seeing your code, but generally I tackle this issue by adding a ContentView that covers the screen when ever your menu opens. The menu would be displayed on top of the ContentView. Then you add a TapGestureRecognizer to the ContentView which closes the menu when clicked.
You could add some color to the ContentView but make it opaque so it is see-through, something like this color: #74787878
ContentView backgroundView = new ContentView {
BackgroundColor = Color.FromHex("#74787878"),
HorizontalOptions = LayoutOptions.FillAndExpand,
VerticalOptions = LayoutOptions.FillAndExpand,
Content = //Your menu
}
backgroundView.GestureRecognizers.Add(new TapGestureRecognizer {
Command = new Command(() => {
//Remove the background and hide the menu
})
});
I am using menu using dijit.menu and Its work with right click and left click.
How I open the menu on mouse over and close on onmouseout?
dijitActionMenu = new dijit.Menu({
targetNodeIds:[actionMenuId],
leftClickToOpen:"true"
});
Have you tried something like
// Create a new Tooltip
var tip = new dijit.Tooltip({
// Label - the HTML or text to be placed within the Tooltip
label: '<div class="myTipType">This is the content of my Tooltip!</div>',
// Delay before showing the Tooltip (in milliseconds)
showDelay: 250,
// The nodes to attach the Tooltip to
// Can be an array of strings or domNodes
connectId: ["myElement1","myElement2"]
});
More details are here dialogs_tooltips.Even dijit.Menu have onMouseOver even.
onMouseOver Event
I am able to get the dijit/Menu onmouseover.
Create an element which will invoke onmouseover event.
Element
show() will call custom widget which will create menu for you.
E.g.,
show = function() {
var roll = new rollover()
}
And rollover.js will be the custom widget.
From the constructor of it, you can invoke the function and create the menu.
pMenu = new Menu({ class: "rollovermenu", id: "rolloverid" });
I am trying to build a chrome extension. In it I want the context menu to change according to the selected text on the page.
For example, if its a number I want a menu that says divisibility test for this numbr is ...
and if it is a string, it should have a something else, but not both at the same time.
I cant figure out how to do that.
You will have to set a listener for mouse down. There is no other way to get the selected text before the menu is created.
See this SO question:
chrome extension context menus, how to display a menu item only when there is no selection?
Here is part of the code the rest is at the link.
document.addEventListener("mousedown", function(event){
//right click
if(event.button == 2) {
if(window.getSelection().toString()) {
chrome.extension.sendRequest({cmd: "createSelectionMenu"});
} else {
chrome.extension.sendRequest({cmd: "createRegularMenu"});
}
}
}, true);
I had tried looking up on here many different answers to this question and tried using their solutions, but it didn't seem to work, such as this solution:
Is it possible to hide href title?
My question is how am I able to hide the title attribute tooltip when the user mouses over the picture? I tried using the <span title=" ">text</span> but it only caused the title tooltip to show the space or the span's title attribute.
Here is my website.
I figured out the answer to my question. Thank you Gert G for getting me started! =]
What I did in order to hide the title attribute, was first to put everything into a loop because otherwise, it will take the first link's title and apply it to the picture clicked on:
$("a[rel='portfolio']").each(function(e) {
}
Then, I declared a variable that contains the title to whatever elements you want them applied to:
var title = $(this).attr("title");
Once I declared the variable, I then created a function that hides the title when it's moused over, then adds the title back on when I mouseout on it (for the purpose of having my lightbox, ColorBox).
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
In order for the title to be viewed when click on, you have to add another function:
$(this).click(
function() {
$(this).attr('title', title);
}
);
Putting it all together, it looks like this:
$("a[rel='portfolio']").each(function(e) {
var title = $(this).attr('title');
$(this).mouseover(
function() {
$(this).attr('title','');
}).mouseout(
function() {
$(this).attr('title', title);
});
$(this).click(
function() {
$(this).attr('title', title);
}
);
});
I hope this helps everyone else looking for a similar or this exact solution!
You can check out the changes here.
Thanks Abriel for the solution, I have converted it to YUI 3 and below is the code in case anyone needed it
YUI().use('node', function(Y) {
Y.all("a[rel='portfolio']").each(function(node) {
var title = node.get('title');
node.on('mouseover', function(ev) {
ev.target.set('title', ev.target.get('text'));
ev.target.on('mouseout', function(e) {
e.target.set('title', title);
})
})
node.on('click', function(ev) {
ev.target.set('title', title);
})
})
})
I was looking for a jquery solution but I am using a javascript solution that works fine for me. I needed the "title" attribute to pass descriptive information about a product / image and within that descriptive information there was basic html tags that were needed. And so whenever someone passed the mouse over the image this mixed code and description will popup. This was less than desirable so I am using the following code so that the "title" information is hidden during mouseover but the title information is still available onclick.
Add this in your link code! Hope this helps someone:
onclick=\"javascript: this.title='description and or html goes here' ;\"
onMouseOver=\"javascript: this.title='' ;
Cheers!
Its works like this:
1:Create your own attribute and call it from lightbox
click me
2:Rename the title attribute in jquery file to:
getAttribute('stitle')
I used it for my tooltip, but it should work even without it.
I nested my link and putted title inside it. Than into nested image I´ve wrote title=" " (with that space).
<a href="http://myweb.com" class="tooltip" id="facebook" title="Sing up to my Newsletter"
<img title=" " src="../img/email.png" alt="email icon" width="32">
</a>
Than, when I hover on my email icon, no title is shown.