Develop Reference

My custom bootstrap tooltip style gets overriden when using data-container="body" attribute to work around overflow:hidden div element

I have a custom bootstrap tooltip that my customer really likes. It works great on various elements. I added it to a datafield of a gridview table, and it Worked (ed) great -- "until" I added an overflow:hidden div to keep the gridview header row fixed.
Now the the tooltip gets occluded by this header row div. I poked around and saw various workarounds - the only one which kind of worked was to use data-container="body" (attribute) or various derivations of that using javascript which placed the tooltip on top of the header row div (when hovering the datafield of the first row in the gridview).
The problem I have with data-container="body" or { container:'body' }is that it overrides the custom style of the tooltip.
I set the width to 500px and I use !important, ... but when I use data-container="body" the width becomes 200px and the background color changes. I played around with z-index:1000; position:relative; in the css which helped the opacity which I have set to 1 but the width/background color still going to bootstrap default.
What is a workaround for this so I can keep my custom tooltip style?

Well, I came up with one -- non-programmatic workaround (which the client is sort of living with) and that is to add two blank rows to the beginning of the gridview and two more rows to the end of the gridview, and that way the rows with data content the popover tooltip doesn't get clipped now by the hidden div. One other thing I tried was to make the overflow div visible. This also worked to prevent clipping the tooltip, but I lost scrollability of the gridview. Is there a workaround for that?

jQuery to update actual CSS

First off: I'm aware of the jQuery.css() function, but it doesn't work in my case. I'll explain why.
I have a jQuery color picker being used to change the highlighting of a website. I want to apply that color picker to the border of an element which only shows on hover.
The jQuery.css() function only applies the CSS to elements it finds, and does not work on the :hover CSS attribute.
I've tried adding a CSS class which I toggle on the hover, but it comes back to the same problem: I'm trying to change ONLY the hover value.
There's got to be a way to do this, but I've been searching StackOverflow and Google for the better part of an hour now, so I'm invoking xkcd #627

Use the hover event to achieve the same results.
$('selector').hover( function(){
//A function to execute when the mouse pointer enters the element.
$(this).css('property','value');
}, function(){
//A function to execute when the mouse pointer leaves the element.
$(this).css('property','value');
});

I'm adding this as an alternative answer.
If you need to dynamically change your CSS then there is something wrong with your CSS. It's very strange that you need a definition, that you can't toggle with a class and has to be generated dynamically.
Let's say you have a widget that can be in two modes: inactive or active. When it's active elements in it should respond visually to a hover event, when it's not, they shouldn't.
<div id="my-widget" class="my-widget-container">
<div class="element">Something to look at</div>
</div>
CSS
.my-widget-container .element { background-color: #ffffff; }
.my-widget-container.active .element:hover { background-color: #00ff00; }
You switch the mode by:
$("#my-widget").addClass("active");
This will activate the :hover line for the element which now appears interactive.
If I knew more about your situation I could perhaps fix a fitting solution.
Also, jQuery.css is poorly named, perhaps jQuery.style would be a better name since that is exactly what it does.

Overflow property on TD elements in an HTML Table

I am using HTML tables to show my data in tabular form. I know that the
Default behavior of td elements in a table is that they change their width and height in order to accommodate the text inside it i.e. like that shown in figure (A)
Is it possible that I some how achieve the effect as shown in figure (b) , i.e. I would like to modify the td elements using CSS in such a way that it gets the shape as that in Figure (b) i.e. maintain it's width and height but makes the text inside itself overlay the sibling td elements?
PS: Have tried fixing the width and height plus using the overflow property of CSS but that didn't work.
NOTE
I don't want to use the colspan property, i.e. I still want the sibling td to be there (of course, they won't have any content inside them).
The reason Why I want to achieve this is I'm using jQuery plugin Datatable and this doesn't work with the table having tds that are using colspan property

Finally, using #teemu suggestion, i.e.
Using an absolutely positioned extra element into td

How to create a div that apears below a table row

Like in this demo
http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx
Except In this demo it's being added as an additional row. (click one of the ">" things and check the page source, it added a new row to the table). If I used this strategy, It would be difficult to sort, using a standard Jquery plugin, like table sorter.
Ideas?

went away and did some thinking about my comment, about finding row height and overlaying the div.. it's so close, but I'm no jQuery whiz, so perhaps someone can help tidy this up
I have it showing/hiding the div in the right position IF the div/row is closed before the next one is opened.. but if you click button 2 while div one is opened is doesn't get the right top position (it gets the position the row was at after being expanded not the original row position), I'm sure there must be a way to get that position while the rows are not expanded and store it??
anyway have at it.. I know it's very long-winded, variable wise, because I can only apply the CSS logic - I don't know enough about js or jquery functions and storing.. also I thought if I explained how I got to my variables and which ones were needed it might help those who do know how to make this better ;)
the input/buttons have no text but they're the click trigger
position() is maybe not the right thing to use, it needs for the div to be able to find the original position of the related row (inside table-wrap div?)
?
here's the Example

You can't. A <div> is not a valid child of <table> or <tbody>. You'll need to use a <tr>.
I don't know how that plugin works, but perhaps there's support for sorting multiple <tbody> elements, which would allow you to group your sets of rows.

That div is inside a td which is hidden until you click the >
Here is a demo: http://jsfiddle.net/maniator/7RLhL/1/

I don't know if you can do that. Putting a tag like inside a table isn't valid (X)HTML, and so probably won't give you the effect you were looking for

If you look at that demo, they're using a second <tr> below the first one with a <td> that spans most of the columns.

You can embed a detail table inside a table cell under each description cell which will be not visible and make it visible on tr click:
http://jsfiddle.net/bouillard/QmK4Z/

As mentioned in other answers, we cannot add a div inside the table without it being in a TD. However, there might be something that can be done to place the div over the row. To have the effect of the div being shown as inside the row, we could increase the height of the row while the div is being shown. Here is the very basic demo. Since the div is not really inside the table, if the table happens to sort, you would probably want to hide the div or relocate it to the new TR location. It would present its own challenges but you could play with it and see if it works for you.

I have an idea. It's really ugly. The only think I could think of doing is before sorting the rows, detach the additional rows(with the div) and use JQuery to store it somehow. Then after the sorting is done reattach the rows(with the div) in the right place(s).
That could, no I should say WILL, get ugly really fast, especially with paging and filtering...

You can use getBoundingClientRect to get the element's position and then set those values to a div css position left and top. Must also take into account the window scroll as getBoundingClientRect will return it relative to the window viewport.
The following example will locate a div named #tooltip under any tr row when hovering over it. I'm using jQuery for convenience but you can translate to vanilla JS easily.
<script>
$("tr").hover(
function () {
const row = this;
const bounds = row.getBoundingClientRect();
tooltip.css({
left: bounds.left + window.scrollX,
top: bounds.bottom + window.scrollY
});
},
function () {}
);
</script>
<table> ... </table>
<div id="#tooltip"> ... </div>
Be sure to make div positioning absolute and also to skip pointer events or the div will block hover events from reaching the table elements.
<style>
#tooltip {
position: absolute;
pointer-events: none;
}
</style>
Good luck!

How do I set the z-index of a table row?

Maybe what I am trying to accomplish is not feasible but the general idea is that when a person clicks a table row, the page dims (like a modal) but leaves that row visible for editing. I tried setting the z-index of the table row itself but it did not work. It will work if I set the table rows position attribute to absolute but that seems to remove the table row from the table completely.

I can only think of more complicated solutions like these:
You'll need 3 transparent gray divs instead of 1. Use the first to gray out the whole page. Set the z-index of the whole table to bring it above that div. Use the 2nd div to gray out everything above your row, and the third to gray out everything below your row, leaving just your row un-grayed.
Gray out the whole page. Create a duplicate table with a single row that you hover above the original table. When you edit this new table, sync those values with the underlying table.

I've successfully done this just now using
div.milk { position:absolute; z-index:2; width:100%; height:100%; opacity:.5; }
tr.raised { position:relative; z-index:3; }
so, in short, position:relative seems to work ?
I must admit, I came here because I still have some weird issues.
but overall it seems to work ?
*-pike

If you're using jQuery, try this:
$("<get the tr>").css("z-index", <value>);

i don't think you'll be able to accomplish your desired effect with z-index. using overlay divs to mask everything around the table row seems like a more workable approach.