Ticket #4393 (new task)
TabContainer: support tooltips on tab buttons
| Reported by: | guest | Owned by: | |
|---|---|---|---|
| Priority: | normal | Milestone: | 1.3 |
| Component: | Dijit | Version: | 0.9 |
| Severity: | normal | Keywords: | |
| Cc: |
Description
A tooltip can be attached to a tab container as in the following example. However, the tooltip displays when one hovers over the contents of the tab container, not over the tab (label) itself. It also displays after all the contents, which is usually nowhere near the cursor or the tab. To get the present functionality, one can just attach the tooltip to content of the tab container, but there appears to be no way to attach the tooltip to the tab (label) itself. Among other things, this means that there is no tooltip for tab contents which aren't displayed. Either in dijit.layout.TabController? or dijit.layout._TabButton, something needs to be added so that the tooltip can be properly attached to the label.
<html>
<head>
<script type="text/javascript" src="../dojoAjax/dojo/dojo.js"
djConfig="parseOnLoad:true">
</script> <script type="text/javascript" >
dojo.require("dojo.parser");
dojo.require("dijit.Tooltip"); dojo.require("dijit.layout.LayoutContainer?"); dojo.require("dijit.layout.TabContainer?"); dojo.require("dijit.layout.ContentPane?");
</script>
<style type="text/css"> @import "../dojoAjax/dijit/themes/soria/soria.css";
html, body, #mainDiv {
width: 50%; height: 100%;
}
</style>
</head> <body class="soria">
<div dojoType="dijit.Tooltip" connectId="myTab" label="This is a tab test"></div>
<div id="mainDiv" dojoType="dijit.layout.LayoutContainer?">
<div dojoType="dijit.layout.TabContainer?" layoutAlign="client">
<div id="myTab" dojoType="dijit.layout.ContentPane?" title="Tab">
<div dojoType="dijit.layout.ContentPane?">
This is a test.
</div>
</div>
</div>
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="../dojoAjax/dojo/dojo.js"
djConfig="parseOnLoad:true">
</script> <script type="text/javascript" >
dojo.require("dojo.parser");
dojo.require("dijit.Tooltip"); dojo.require("dijit.layout.LayoutContainer?"); dojo.require("dijit.layout.TabContainer?"); dojo.require("dijit.layout.ContentPane?");
</script>
<style type="text/css"> @import "../dojoAjax/dijit/themes/soria/soria.css";
html, body, #mainDiv {
width: 50%; height: 100%;
}
</style>
</head> <body class="soria">
<div dojoType="dijit.Tooltip" connectId="myTab" label="This is a tab test"></div>
<div id="mainDiv" dojoType="dijit.layout.LayoutContainer?">
<div dojoType="dijit.layout.TabContainer?" layoutAlign="client">
<div dojoType="dijit.layout.LayoutContainer?" title="Tab">
<div id="myTab" dojoType="dijit.layout.ContentPane?" layoutAlign="client">
This is a test.
</div>
</div>
</div>
</div>
</body>
</html>
