<div dir="ltr"><br><div><div><div class="gmail_extra"><div class="gmail_quote"><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div><div>1.   pop up a short description of the function<br></div></div></blockquote><div>The bootstrap popover would be a good way to do this:<br><a href="http://getbootstrap.com/javascript/#popovers">http://getbootstrap.com/javascript/#popovers</a><br><br>Unlike some of the bootstrap components, you can't just add it with DOM attributes, though, and actually need to do some JS. Here's a relatively simple way to get a popover:<br><a href="https://gist.github.com/bollwyvl/7c1d9606bc31272c825a">https://gist.github.com/bollwyvl/7c1d9606bc31272c825a</a><br><br></div><div>It has a lot of limitations: a better one would do a full container in the popup body, expose all the options, etc.<br></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div><div>2.  state information</div></div></blockquote><div>Again, bootstrap mostly has you covered:<br><a href="http://getbootstrap.com/components/#alerts">http://getbootstrap.com/components/#alerts</a><br><span style="font-family:courier new,monospace"></span><br></div><div><span style="font-family:courier new,monospace">widgets.HTML(</span><br><span style="font-family:courier new,monospace">    value="X",</span><br><span style="font-family:courier new,monospace">    _dom_classes=["alert alert-danger"]</span><br><span style="font-family:courier new,monospace">)</span><br><br></div><div>When you want it to be something else, you would just change the value and the _dom_classes.<br></div><div> </div><blockquote class="gmail_quote" style="margin:0px 0px 0px 0.8ex;border-left:1px solid rgb(204,204,204);padding-left:1ex"><div><div>3.  tabbed-view<br></div></div></blockquote><div><br>There is already a tabs widget, which subclasses Box:<br><span style="font-family:courier new,monospace"><br></span></div><span style="font-family:courier new,monospace">widgets.Tab(</span><br><span style="font-family:courier new,monospace">    _titles={0: "A", 1: "B"},</span><br><span style="font-family:courier new,monospace">    children=[widgets.Box(), widgets.Box()]</span><br><span style="font-family:courier new,monospace">)</span><br><div><br></div><div>It should be pretty easy to adapt this to your layout, and it can be switched programattically with selected_index.<br></div></div></div></div></div></div>