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 bill)

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 guest

The tooltip won't even open for me when I try to attach one to a tab.

comment:2 Changed 12 years ago by bill

Milestone: 2.0
Summary: Tooltip attached to tab opens wrong time, wrong placeTabContainer: support tooltips on tab buttons
Type: defecttask

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:3 Changed 12 years ago by alex

Milestone: 2.01.3

Milestone 2.0 deleted

comment:4 Changed 11 years ago by bill

Description: modified (diff)
Resolution: duplicate
Status: newclosed

Dup of #7508 (or vice-versa).

Note: See TracTickets for help on using tickets.