I tried adding a tooltip inside a tab but the tooltip doesn't work because it inherits the CSS styles from the tab.
Specifically, the height of the tab is the issue.
Trying to override the CSS has no effect.
I made as few modifications as possible to the minimal tab example given here:
http://flowplayer.org/tools/demos/tabs/index.html
To reproduce, hover over the 'Test' link.
The resulting tooltip is not yellow and has the tab's height, not a sensible default height.
Moving the anchor link outside of the tab makes it work.
FULL SOURCE EXAMPLE
<!--
This is the jQuery Tools standalone demo, the fastest way to get started.
You can freely copy things on your site. All demos can be found here:
http://flowplayer.org/tools/demos/
- cdn.jquerytools.org is available until the end of 2010 for testing
- css files should not be referenced from flowplayer.org when in production
Enjoy!
-->
<!-- DOCTYPE is always recommended. see: http://www.quirksmode.org/css/quirksmode.html -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- standalone page styling -->
<style>
body {
padding:150px 50px;
font-family:"Lucida Grande","Lucida Sans Unicode","bitstream vera sans","trebuchet ms",verdana;
}
/* get rid of those system borders being generated for A tags */
a:active {
outline:none;
}
:focus {
-moz-outline-style:none;
}
div.tooltip {
background-color:#ffff8e;
/*outline:1px solid #fff;*/
border:1px solid #ddd;
padding:5px;
display:none;
color:#44335F;
text-align:left;
font-size:9pt;
/* outline radius for mozilla/firefox only */
outline-radius:4px;
-moz-outline-radius:4px;
-webkit-outline-radius:4px;
}
div.tooltip div {
font-weight:normal;
}
</style>
<!--
this file includes all tools together with the jQuery library
-->
<script src="http://cdn.jquerytools.org/1.0.2/jquery.tools.min.js"></script>
<!-- tab styling -->
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs.css" />
<!-- tab pane styling -->
<style>
/* tab pane styling */
div.panes div {
display:none;
padding:15px 10px;
border:1px solid #999;
border-top:0;
height:100px;
font-size:14px;
background-color:#fff;
}
</style>
<!-- the tabs -->
<ul class="tabs">
<li><a href="#">Tab 1</a></li>
<li><a href="#">Tab 2</a></li>
<li><a href="#">Tab 3</a></li>
</ul>
<!-- tab "panes" -->
<div class="panes">
<div>First tab content. Tab contents are called "panes"
<a href="#" rel="#overlay">Test</a><div class="tooltip">MyTooltip</div>
</div>
<div>Second tab content</div>
<div>Third tab content</div>
</div>
<!-- This JavaScript snippet activates those tabs -->
<script>
// perform JavaScript after the document is scriptable.
$(function() {
// setup ul.tabs to work as tabs for each div directly under div.panes
$("ul.tabs").tabs("div.panes > div");
$("div > a").tooltip();
});
</script>
