Opened 12 years ago
Closed 11 years ago
#4393 closed task (duplicate)
TabContainer: support tooltips on tab buttons
| Reported by: | guest | Owned by: | |
|---|---|---|---|
| Priority: | high | Milestone: | 1.3 |
| Component: | Dijit | Version: | 0.9 |
| Keywords: | Cc: | ||
| Blocked By: | Blocking: |
Description (last modified by )
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>
Change History (4)
comment:1 Changed 12 years ago by
comment:2 Changed 12 years ago by
| Milestone: | → 2.0 |
|---|---|
| Summary: | Tooltip attached to tab opens wrong time, wrong place → TabContainer: support tooltips on tab buttons |
| Type: | defect → task |
Yes, tooltips on tabs aren't supported. You'd need to put the tooltip on the TabButton? somehow. Leaving for consideration in 2.0.
comment:4 Changed 11 years ago by
| Description: | modified (diff) |
|---|---|
| Resolution: | → duplicate |
| Status: | new → closed |
Dup of #7508 (or vice-versa).
The tooltip won't even open for me when I try to attach one to a tab.