Develop Reference

Adding bootstrap tooltip modifies the style of the element itself - how do I stop this happening?

JSFiddle here
I'm trying to add tooltips to an existing page. We already use bootstrap 2.3 so it seemed like the obvious choice.
My html looks like this, say:
<script>
//initialize tooltips
$(document).ready(function(){
$('.my_button').tooltip();
});
<div class="my_button_row">
buttonnnnn
</div>
and my CSS looks like:
.my_button_row{
height: 100px;
border-bottom: 1px solid #E5E5E5;
width: 500px;
display: table;
border-collapse: separate;
border-spacing: 20px 5px;
}
.my_button {
background: linear-gradient(to bottom, #3FACF5, rgba(56, 101, 131, 0.76)) repeat scroll 0% 0% #3498DB; border-radius: 34px;
box-shadow: 4px 4px 4px #666;
color: #FFF;
font-size: 26px;
padding: 10px 10px;
text-decoration: none;
display: table-cell;
margin: 10px;
white-space: normal !important;
word-wrap: break-word;
text-align: center;
vertical-align: middle;
height: 100px;
max-width: 180px;
min-width: 15%;
line-height:26px
}
.my_button_green{
background: linear-gradient(to bottom, #63F53F, rgba(79, 131, 56, 0.76)) repeat scroll 0% 0% #61DB34
}
When I mouseover the button, the tooltip displayed just as I wanted first time, but the styling on the button itself also appears to change - as you can see from the jsfiddle - how can I stop this from happening?
Edit: I really would prefer a solution that doesn't involve totally changing the way the page is laid out (i.e. 'just remove 'display:block from the container element' is a much less straightforward solution than this simplified JSfiddle would make it appear ) - a solution that doesn't modifying the HTML would be ideal.

Delete display: table; from .my_button_row{ ... or add
data-container="body" to
buttonnnnn

You just have to give width: 500px; to my_button class and remove
// max-width: 180px;
// min-width: 15%;
Check out the fiddle
EDIT:
According to your requirement from the comments:
Adjusted the padding instead of giving width statically
Updated Fiddle

Add display: block to .my_button.
You'll have to fiddle around with the margins and padding to get the text in the center of the button, but this will fix your issue. Also keep in mind that with display: block, the button will be at most 180px wide due to yourmax-width style.

Thats happening because you have used display:table-cell css property for the button while the tooltip is being appended as display:block element.
Simply use display:block for .my_button(or remove the display:table property from .my_button_row) and you are good to go
Updated fiddle

Getting a <div> and <a> to be the same height side by side

So I am trying to add a custom style to the select2 jquery plug, it is a tag like multi selector plugin. The way that select2 renders selected "tags" guides my css rules to try and style. select2 renders a <div> containing the selected tag text followed by an <a> to remove that selected tag if the user desires.
I want the close btn and the tag text to look like one block. I have it almost where I want but you can see that the <a> element and the div element vary in height by a pixel or two. I thought maybe this was a display:inline versus display:block issue but I have tried setting both the elements to display:inline-block with no luck, here is a jsfiddle, just select both option1 and option2 to see my issue:
http://jsfiddle.net/QRNqm/
And here is my code, remember I am using the select2 plugin also:
$(function(){
$('#mdlTags').select2();
});
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
}
.select2-choices li div {
border-radius: 2px 2px 2px 2px;
color: #fff !important;
text-decoration: none;
padding: 3px 14px 3px 12px;
background-color: #bdc6e5;
}
<select multiple="multiple" id="mdlTags" class="skipMsDropdown" style="width:330px;">
<option value="1" >Option 1</option>
<option value="2" >Option 2</option>
</select>

Replace .select2-search-choice-close class with below:
.select2-search-choice-close {
padding: 2px 14px 3px 0;
border-radius: 2px 2px 2px 2px;
background: url(/images/projects/closeWhite.png) no-repeat 5px center #bdc6e5;
height: 14px; /* given height (actual 13px and 1px to adjust bottom margins) to adjust line-height of parent element */
margin-top: -1px; /* to adjust top margins to get in proper line */
}
Here is a working DEMO.

It's now on the same level. Here is the edited css.
.select2-search-choice-close {
background: url("/images/projects/closeWhite.png") no-repeat scroll 5px center #BDC6E5;
border-radius: 2px;
padding: 3px 14px 3px 0; // increase the top padding for 1 point.
}
.select2-search-choice-close {
background: url("select2.png") no-repeat scroll right top rgba(0, 0, 0, 0);
display: block;
font-size: 1px;
height: 13px;
outline: medium none;
position: absolute;
right: 3px; // Reduce the top position for 1 point
top: 3px;
width: 12px;
}

First off, you have one less pixel of top padding on the select2-search-choice-close style. But even once you fix that, there will still be a pixel of difference between the two elements.
If you take a look at the demo on the Select2 page, that's the way it appears there as well (with one vertical pixel difference between the two elements). The difference is that they are applying the unifying style on the container that holds these two elements, rather than styling each of these elements separately.
If you make these two changes, you end up with something like this:
http://jsfiddle.net/Cv6cH/

Changing the style of ASP.NET Dropdown box

I have a default ASP.NET Dropdown, and it is rendered with a select tag id of "Countries".
I'd like the background of the drop-down to be transparent to match with the background of the page, and also like to keep make the default border disappear as well, so it blends well with the background. The list items can have the white background. I have an image of a custom arrow that i'd like to use instead of the default one that is used to click on the drop-down.
On hovering over the drop-down list items, I'd like the background of the item to be yellow, and the font color should always be black.
I'd like to use CSS 2.1 as much as possible for this, but if it's too complex then I'm willing to use javscript or jquery.
Below is the rendered markup, and some custom styles I've been trying to write. I also think some of the styles are overwritten by some default ones. Any help to finish this styling would be greatly appreciated. Thanks
<select name="ContriesDropdown" class="Select.SmallSelect" id="Countries" style="width: 100px; background-color: white;" onblur="try{FormUtils_ElementErrorReset(this);}catch(e){}" onchange="Send(this.value);">
<option value="1">Country1
<option value="2">Country2
*CustomCss*
#Countries { position:absolute; display:inline; top:6px;}
#Countries {background-color:transparent; vertical-align: middle; color: #44586D; border: 0px transparent; display: inline;padding:2px;}
#Countries Option:hover { color:black; background-color:Yellow; }

Try This.
select
{
-webkit-appearance: button;
-webkit-border-radius: 2px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
-webkit-padding-end: 20px;
-webkit-padding-start: 2px;
-webkit-user-select: none;
background-image: url(../images/select-arrow.png), -webkit-linear- gradient(#FAFAFA, #F4F4F4 40%, #E5E5E5);
background-position: center right;
background-repeat: no-repeat;
border: 1px solid #AAA;
color: #555;
font-size: 10pt;
margin: 0;
overflow: hidden;
padding-top: 2px;
padding-bottom: 2px;
text-overflow: ellipsis;
white-space: nowrap;
font-family: Cambria;
}

The default ASP.Net controls are very limited when it comes to styling. You should try using external controls like the JQuery UI dropdown instead.
http://jqueryui.com/autocomplete/#combobox

Button press effect not working in css

I want to have this button pressed effect in css. I mean for example lets say I press a button then I want to change its css so that it looks pressed. Here is something that I tried. But it's not working. I used example from a site. But the button's size gets smaller and it looks different. Here is the link for the code http://jsfiddle.net/goku/GdD34/
.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
$('.happy').click(function() {
alert('hello');
$('.happy').attr('class','pressed');
});
<input type="button" class="happy">

Just used the :active pseudo-class.
input.happy:active { /* Your style */ }

This is happening because you're replacing the class and not adding a new one. you should use :
$('.happy').addClass('pressed');
Instead of :
$('.happy').attr('class','pressed');
Because when u do that you remove all the css you previously applied to it. Your other option it to add the width/height or any other css to the pressed class.

There are a few things in your code (fiddle):
I guess you want to use a javascript framework (like jQuery), you did not select one in the fiddle.
You have a typo in the fiddle, inside the function it says $('happy') so no element will be found.
You remove the class "happy" within the javascript and replace it with pressed. Maybe you want to apply both $('.happy').attr('class', 'happy pressed'); But then for change .pressed to input.pressed and move below .happy
Perhaps you don't want all buttons to change, use use $(this).attr(...) inside the function

I'd suggest you change the order of your CSS, the and the JS to:
<style>
input.happy {
background-image: url(/img/happy.png);
background-color: transparent;
background-repeat: no-repeat;
border: none;
width: 64px;
height: 64px;
margin: 10px;
cursor: pointer;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
box-shadow: 0px 3px 5px #000;
-moz-box-shadow: 0px 3px 5px #000;
-webkit-box-shadow: 0px 3px 5px #000;
}
input.happy.pressed{
position:relative;
top: 3px;
color: #fqq;
box-shadow: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
}
</style>
<script>
$(function(){
$(".happy").click(function(){
$(this).addClass("pressed");
});
});
</script>
<input type="button" class="happy">
Note, the "$(function(){" bit says "do this after page load". "addClass" will add the class to the list of classes for an element, but the event must be assigned after the DOM has loaded.
Also, you must use '$(this)' instead of '$(".happy")' inside the click function as to only apply the style to the button that was clicked.

You had some syntax errors.
Best event for this isn't .click(), its .mousedown();
When you click the Button without Releasing:
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
});
I believe now it's working : http://jsfiddle.net/HKZ7M/
Then when you release the mouse, give it back the old class.
When you Click the Button then Release it
$('.happy').mousedown(function() {
$('.happy').attr('class','pressed');
$('.pressed').mouseup(function() {
$('.pressed').attr('class','happy');
});
});
It's working : http://jsfiddle.net/Xx2Gn/
Important Note: The .pressed button is smaller than the .happy button, when you release the mouse you have to make sure that the pointer will be above the new .pressed button, that's why you must make them the same size.

a box with a *pointer* with just CSS?

How do we use just CSS to achieve the effects shown in this image: http://i.stack.imgur.com/smWmQ.gif (I'm sure that image is created with CSS because I visited that site with images disabled in Chrome)

Here is a simple very efficient way of doing it.
Fiddle
UPDATE:
Here is an example:
the html
<div>
<span class='tip'></span>
</div>
the css
div {
height: 30px;
width:50px;
}
.tip {
display:block;
width:1px;
heigth:20px;
border-left: 30px solid #fff;
border-right: 30px solid #fff;
border-top: 25px solid #F00;
}

There is something similar I took from the jQuery Ketchup plugin.
The CSS looks like this:
.box span {
border-color: rgba(255, 0, 0, 0.6) transparent -moz-use-text-color;
border-left: 0 solid transparent;
border-right: 15px solid transparent;
border-style: solid solid none;
border-width: 10px 15px 0 0;
display: block;
height: 0;
margin-left: 10px;
width: 0;
}
.box ul {
background: none repeat scroll 0 0 rgba(255, 0, 0, 0.6);
border-radius: 5px 5px 5px 5px;
color: #111111;
font-family: Helvetica,Arial,sans-serif;
font-size: 12px;
line-height: 16px;
list-style: none outside none;
margin: 0;
padding: 10px;
text-align: left;
}
The according HTML:
<div class="box">
<ul>
<li>Content</li>
</ul>
<span></span>
</div>
Also have a look at the JSFiddle.

The triangle you see is just a box, often with no size, with really degenerate and different border-widths. For example to make an upward-pointing triangle, you would make a make a box like so:
top
_____
left| / \ |right
|/___\|
bottom
The box has no size, a top-border-width of 0, and non-zero values for the other widths. The border-color of the left and right and top are transparent, so you can't see those triangles. All you can see is the bottom border.
Working example: http://jsfiddle.net/NnGyv/
Unfortunately, you cannot use percentages with border widths, or else you could achieve a reusable CSS class definition.

Most browsers can do this automatically with HTML5 validation. You won't have much control over how it looks but it's 1000x easier to code and works without Javascript.
If you want more visual control there's jQuery Tools Validator. Although this uses Javascript it should fall back to HTML5 if Javascript is disabled.

The original site may be using HTML5.
HTML5 has some pretty neat features for client-side form validation. This looks very much like Chrome's take on an input box with the "required" attribute set. You'll also note a placeholder (another HTML5 attribute).
jsFiddle example. You can find out more information from Dive into HTML5.