We Keep Coding

Bootstrap popover: hide when cursor moves outside of the window

I want to display a popover which contains several buttons when user hovers over a text link
The problem I have is the default Bootstrap popover I'm currently using is dismissed when the cursor from the link which triggered it (e.g. when the user moves to select one of the buttons)
This jsFiddle is an example of what I tried to do.. The principle is: show popover when the link (#example) is hovered, hide popover when the popover (.popover) is unhovered.
But this doesn't work, although I'm sure that the BS popover is encapsulated in a .popover class (I check with FF dev debug tool).
Funny thing: it works with another div! If I replace
$('.popover').mouseleave(function(){
$('#example').popover('hide');
});
By this
$('.square').mouseleave(function(){
$('#example').popover('hide');
});
The popover is indeed hidden when no longer hovering the blue square.
Why doesn't work with .popover?

You need to hide popover when the mouse leaves the .popover-content not .popover. And .popover-content does not exist at the beginning so you need to bind the event to the document
$(document).on('mouseleave','.popover-content',function(){
$('#example').popover('hide');
});
http://jsfiddle.net/o4o9rrsq/2/

Fade Toggle not working

QUESTION: Why does my fade in/fade out not fire/work? How best to resolve?
BACKSTORY: Clicking a link will trigger a javascript/jQuery event which will display or hid a series of LI's. Currently I've been able to create a link that when clicked will 'pop' a bunch of links (reveal) or hide them, but this feels kind of abrupt to me and i'm trying to make them cascade/fade in and cascade out/fade out, but my script is not working it seems. I have tried googling and looking at jsKit and jQuery websites but not found anything that I can understand well enough to properly impliment.
ACCESS EXAMPLE: Click on the white arrow icon in the little grey box in the upper right corner of the browser to reveal/open the navigation draw. Scroll down to magenta colored link which reads 'Display/Hide on click'. Clicking the magenta link ought to reveal three LIs (A), (B), and (C). Clicking the magenta link ought to hide them. However, when i click the magenta test link, nothing happens, the LI's remain 'hidden'. This is one my first attempts with JavaScript/jQuery and i'm dreadfully confused and hoping to find guidance on how to solve the issue. I am at best a hobbist when it comes to things like this, but i consider myself more of a persistent newbie.
URL: enter link description here
<!-- jQuery fadeToggle -->
<!-- css is currently directly embedded for testing -> add to tweak.css when done
<style media="screen" type="text/css">
#DivB { display:none; }
</style>
Display/Hide on click
<div id="DivB">
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
</ul>
</div>
<!-- function is located in scripts/jsFunctions.js -->
var fadeToggle = (function() {
$(document).on("click",function (e) {
if (e.target.id=="DivA") {
$("#DivB").fadeToggle(200);
e.stopPropagation();
return false;
}
else if ($("#DivB").is(":visible")) {
$("#DivB").fadeOut(200);
}
});
});

After your script call the function fadeToggle()
JSFiddle

Content box on image hover?

I have a bunch of images in a gallery on a new website im building and Im wanting to have content displayed when a user hovers over an image.
For example if a user hovered over a picture of a car in my gallery then a low opacity content div would fade over the entire image to show text and maybe a link.
I presume this effect could be done with a bit of JS or even CSS Transitions to give the fade.
I just need to know how to make a content box appear over the image on hover, possibly at 80% opacity.
Heres an example of what I have in mind:
Thanks for the help, if anyone could point me in the right direction it would be appreciated.
I can post more information if needed.

This is somewhat simple way of implementing a hover show and hide with jquery.
Working example: http://jsfiddle.net/va2B8/2/
jQuery ( http://jquery.com/ ):
$(document).ready(function() {
$("#Invisible").hide()
$("#hoverElement").hover(
function () {
$('#Invisible').stop().fadeTo("slow", 0.33);
},
function () {
$('#Invisible').stop().fadeOut("slow");
}
);
});
html:
<p id="hoverElement">This little piggy will show the invisible div.</p>
<div id="Invisible">This is the content of invisible div.</div>
css:
#Invisible { background: #222; color: #fff; }
Edit: I changed url for the working example cause i forgot to fade out on mouse out.
Edit2: Changed url again and changed the code cause i had some extra code there.. plus i thought that i might as well add those two .stop() in there so that it stops the animation If the mouse over or mouse out occurs while animation is going on.
( Without the stops one could hover in and out several times and then when he would stop, the animation would still keep going till it has done each animation as many times as he triggered it. You can test that in here http://jsfiddle.net/va2B8/1/ )

You can start using this fiddle :
http://jsfiddle.net/Christophe/2RN6E/3/
1 div containing image and span like :
<div class="image-hover">
<img src="" />
<span class="desc">text to be displayed when imae hover</span>
</div>
Update
All can be done with CSS...
http://jsfiddle.net/Christophe/2RN6E/4/

Here's an easy jQuery plugin you can implement: http://file.urin.take-uma.net/jquery.balloon.js-Demo.html
It works like this:
$(function() {
$('img').balloon(options);
});
This jQuery applied the balloon function to all images on the page. Here's your HTML:
<img src="example.png" alt="Here's your caption." />
The text in the balloon is going to be whatever is in the alt attribute for images and whatever is in the title attribute for other tags.

I've just done this:
http://twostepmedia.co.uk
It uses hoverintent jquery plugin so there is a delay of 250ms after the user hovers over to avoid erratic hover behaviour.

How to change multi-line text color on mouseover

I am trying to change the color of a block of text on mouseover, but only got as far as the text changing if you scroll over the top border of the text.
http://angelamiller.net/archives/test/v3/
I am testing the first block of text on the top left corner, "Thesewordshelptoshapeme".
using
.typoBox div.l3_1 ul:hover {
color:red;
}
What I want to do eventually, is when a user rolls over a block of text and clicks the text, I can then target the other blocks of text (they are all in separate divs) with jQuery or similar to hide those divs and reveal a hidden div which would contain descriptive text about that block of text.
I am not worried about this working on ie 6, but currently am on my mac and have only tried firefox and chrome at this point.
I would be willing to add anchors if it would help.
In my google search the closest thing I could find was a jQuery solution but didn't work:
<script>
$("div.l3_1 ul").mouseover(function () {
$(this).css("color","red");
});
</script>

The problem is your z-indexing. When I click on something with firebug, it gives me the top div.tw. This is true, because you manually put the z-index of that on top. So by means of hitTesting, this is correct. Problem is, I think it is impossible to have some not be hittested. So it has nothing to do with your css. Remove the tw div, or its indexing and you should be fine.

There is some problems with the selectors, not the rules. If you add display: none to the div.13_1 ul { rule, you'll see that it has no effect. That's as far as I've gotten.

Display popup with text and graphics on mouse over

I want to have a popup window such that when the user hovers mouse over the image, it displays that popup window on the right of the image. The window would contain text as well as graphics. The window should close the moment my mouse is out of the image. I tried various scripts that are on the internet, but they show the text as innerhtml of the same page. So that breaks my original page. Is there a way to have a box with text and graphics come up when I roll over the image and go away when I close it?

Check out jQuery qtip -- http://craigsworks.com/projects/qtip/
Demos: http://craigsworks.com/projects/qtip/demos/
Edit: Sample Code (straight from QTip's demo site). This will give the effect seen on http://craigsworks.com/projects/qtip/demos/content/basic
<script type="text/javascript" src="your/path/to/qtip.js"></script>
<script type="text/javascript">
// Create the tooltips only on document load
$(document).ready(function()
{
// Match all link elements with href attributes within the content div
$('#content a[href]').qtip(
{
content: 'Some basic content for the tooltip' // Give it some content, in this case a simple string
});
});
</script>

If you need to catch only mouseover and mouseleave events, maybe you should simply try to use only CSS and :hover selector on image or div, if target browsers let it.