Develop Reference

How to make tooltip or something like a tooltip that pops up instantly on hover?

I know how to make a simple tooltip using title="here's a tooltip", but I want it to pop up instantly on hover instead of waiting a second. Is this possible using anything? It could be html, css, javascript, etc.

I think this might help:
https://www.w3schools.com/css/css_tooltip.asp
I'm not amazing with CSS, but it has something to do with the :hover selector, which allows you to change the properties of a thing when hovered over.

What's faster, to hide/show an HTML element, or to delete/insert it?

I am developing a navbar where the selected button is marked by a triangle. Do I put a triangle in every button of my navbar and keep all but one triangle invisible (or visible but same background as the button)? Or do I delete the triangle and reinsert it in the new button?
I understand the performance impact would probably be negligible, but I am learning my ropes, so mostly asking out of curiosity (and wanting to learn the best practices)

I would do this sort of thing with CSS. Create an "active" class, then add/remove the class with javascript. This is cleaner and will let you have more control over the styling of your chosen indicator (in this case, a triangle).

.normal{
//normal css for all tabs
}
.normal.active{
//triangle CSS for active one
}
now on selection by using JS add active class on particular tab and remove from others.

There should be a space for your triangle on every menu item. It should just be set to visible on hover. Setting something from invisable to visable takes almost no time. Its better practice than deleting and loading images on a selection.

How do I make something look like a tab after it is clicked

Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!

I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).

Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/

Crossfading Submit Button on Hover

I want to customize my submit button so that, when the mouse hovers over it, it crossfades to a new background-image position in my sprite. I can easily get it to switch to that position, but I'd like to have it slowly fade instead.
There are tons of articles on how to do this for simple links, but they all essentially position the other images over the button area, and then fade opacities correspondingly. This doesn't seem possible with a submit button, since input elements don't seem to be able to contain child elements (ie. the other background sprites). Ideas?

I am not sure if this is what you are looking but take a look anyway
http://snook.ca/archives/javascript/jquery-bg-image-animations
DEMO: http://snook.ca/technical/jquery-bg/
anyway, you can still add a click listener event using jquery to any div and make it act like a submit button.
$("div.submit").click(function() {
document.forms[0].submit();
});
add the css, for the mouse over
div.submit:hover {
pointer: cursor;
}

I don't know for sure but if you make the buttons container (a div sized to exactly match the button) you can give it a background image and then fade out the buttons opacity. Can you give an example of the two states you are trying to blend between? It would help give a more specific answer.

There is no consistent way to do this in CSS across all major browsers.
For something like that, you really want jQuery.
Here's a working jsFiddle that shows one example of how you can do this. Just update the fade var to change the timing of the fades.

SVG: alternatives to appendNode for 'bring to front'

As far as I can make out, the only way to bring something to the front is to delete/append, or just append. However, this is so inefficient that I thought I'd just check here first.
I've got a complex set of objects which pop up on a mouseover (paths and text). I initially thought I'd handle this by creating one static instance of the popup, and hiding it. Whenever it's needed, I simply translate it and make it visible.
I thought this worked, but it turns out that it's transparent - anything which is created dynamically in a script appears on top of it. Is there any way to make this work? The alternative is to create it from scratch on every mouseover, and then to delete it on mouseout, which just feels wrong.
Thanks -
Al

You could give it an enormous z-index and toggle the visibility if it is positioned absolutely (or fixed) or the display if it is static. Least amount of redrawing is to position it absolutely or fixed, and toggle visibility between hidden and visible.