jQuery tooltip with links - javascript

How to make pop-up window with links to hover like a normal tooltip just a mouse could click on the links. How can this be done? mouseenter loses focus when navozhu on the link and the window closes
jQuery(document).ready(function(){
jQuery("span.mod_events_daylink_evn").live('mouseenter',function(){
jQuery("span#"+cone).append(jQuery("div#"+newdiv));
jQuery("div#"+newdiv).css("display","block");
});
jQuery("div.eeee").live('mouseout',function(){
jQuery("div.eeee").css("display","none");
});
});

try qtip
a jquery plugin
http://craigsworks.com/projects/qtip2/
update by thomas guettler: updated URL, qtip2 instead of qtip.

Related

Mouseout event in jQuery is triggered when my tooltip is hovered

I have this menu that adds a
It has this jQuery code to add a class on hover and remove on mouse-out like this below...
$(document).ready(function(){
$('.actions-menu').hover(function(){
$(this).addClass('active');
$(this).find('.actions-list').show();
}, function(){
$(this).removeClass('active');
$(this).find('.actions-list').hide();
});
});
The problem is in this image below, when a button icon in the popover menu is hovered over, it shows a tooltip. When you hover this tooltip it triggers the mouseout in my code above and closes the menu.
I need the menu to stay open if a tool tip with CSS CLass .hastip is hovered as well.
How can I do this?
All you need is nested .actions-list inside .actions-menu (if it possible).
example: http://codepen.io/anon/pen/bBPLNK

JQuery: How to select window and some other divs by id?

I have a context menu that pops up whenever a click happens at a certain div inside a container and I want it to hide if either the window element or its container is scrolled.
How can I add the 'window' element in there?
$("#tree-container").scroll(function(){
$cxtMenu.hide();
});
If i understand your question, try:
$("#tree-container").add(window).scroll(function(){
$cxtMenu.hide();
});
If not, please consider to provide a jsFiddle which replicates your issue
You can add a scroll handler directly to the window like
$( window ).scroll(function() {
//Do stuff
});
(Per "Example: To do something when your page is scrolled" of http://api.jquery.com/scroll/)

Bootstrap 3 popover hidden content is still clickable

Here is my code:
http://codepen.io/murdocgrjey/pen/LFuto
I tried to close the popover when clicking outside of the content and the button but there's an issue with its content. Apparently I can't hide or destroy the content completely.
When I toggle the popover with the 'trigger' link, it works fine. But whenever I close it by clicking outside of the content, I can still hover the link in the content.
Any solution for this please?
I think you mess with the internal mechanism too much.
Here is the working fiddle: http://codepen.io/anon/pen/utbin
If the target isn't the trigger, just toggle the existing open popover.
Heres a link to working example: http://codepen.io/anon/pen/zhIsm
I just keep latest trigger and click it, whenever document is clicked.
Here is another way (will work with data-api too) http://jsbin.com/aRiZiki/1/edit
This is what I did in order to prevent elements within the hidden popover from being clicked
$('button.new-history').on('hidden.bs.popover', function () {
$(this).next().remove();
})
The idea being that when the popover is hidden, you should remove it from the DOM.
Hope it helps!

How to prevent click event to trigger show/hide?

There is a clickable layer. On click it reveals/hides some extra content. Within this layer there is a link which triggers another page to load in the browser.
When this link is clicked the clickable layer is clicked too because it contains the link. How can I avoid that?
I want the link to work but while the user clicks on it the extra content should not be shown.
I tried with
$('.link').click(function(event){
return false;
});
but this disables both hide/show and the link to work. Any ideas? Here is my fiddle: http://jsfiddle.net/ZkPLD/
Use stopPropagation to avoid events bubbling up:
$('.link').click(function(event){
event.stopPropagation();
});

How to detect click outside window

I have a customized dropdown in html coded in "ul" and "li", I show options when a user clicks on the head of "ul" I would like to hide these elements when the user clicks outside the menu area.
Is something like this possible with javascript/YUI not Jquery?
I'm not a YUI guy, so I suspect this could be written a bit better, but I have tested it and it works.
Hide the dropdown anytime the document is clicked:
Y.one(document).on("click", function(){
Y.one("#menu").hide();
});
Prevent clicks on the ul from propagating to the document:
Y.one("#menu").on("click", function(e){
e.stopPropagation();
});
If the visitor clicks anywhere, the click will bubble up to the document, and hide the menu. If they click on the menu, the event will be prevented from bubbling up to the document, and as such the menu will not be hidden.
Demo: http://jsfiddle.net/nHnZT/
use('event-outside') adds support for "outside" events. See the user guide for details: http://yuilibrary.com/yui/docs/event/outside.html

Categories