Quantcast
Channel: Planet Plone - Where Developers And Integrators Write
Viewing all articles
Browse latest Browse all 3535

4teamwork: ftw.tooltip introduction - Add tooltips to your plone site

$
0
0

Plone has many great features, but sometimes it’s hard for a user to focus on the task at hand. Even more so if the user is not working with Plone all day.

To make the UI more expressive and to provide a better user experience, we built ftw.tooltip. It provides an easy way to add tooltips to your Plone site and works without customizing nor patching views, viewlets, forms, etc.

A great example is the @@sharing view. Based on your workflow it’s not always clear which checkbox to tick and what the consequences are.

Using ftw.tooltip we can add inline explanations to clarify the individual checkboxes.

123456789101112131415161718192021222324252627282930313233
fromzope.componentimportadaptsfromzope.interfaceimportimplements,Interfacefromftw.tooltip.interfacesimportITooltipSourcefromftw.tooltipimport_classDemoStaticTooltipSource(object):"""Tooltips for the @@sharing view"""implements(ITooltipSource)adapts(Interface,Interface)def__init__(self,context,request):self.context=contextself.request=requestdefglobal_condition(self):returnTruedeftooltips(self):return[{"selector":u"input[name=entries.role_Editor:records]","text":_(u"label_edit_tooltip",default=u"Grants edit permission to the current ""section. The user can modify content created ""by other users."),"condition":"body.template-sharing"},{"selector":u"input[name=entries.role_Contributor:records]","text":_(u"label_add_tooltip",default=u"Grants add permission to the current ""section. The user can only modify his own content,"" not the one from others."),"condition":"body.template-sharing"},]

The only thing left to do, is to register our DemoStaticTooltipSource in the zcml.

12
<adapterfactory="ftw.tooltip.demo_tooltip_source.DemoStaticTooltipSource"name="demo1"/>

This results in:

If you don’t specify the text attribute, ftw.tooltip will display the title attribute of the matching element. This way we can easily add a tooltip to the global navigation:

12345
deftooltips(self):return[{'selector':u'#portal-globalnav li a','condition':'#portal-globalnav'}]

Check the README for more information about structured tooltips or client/server side conditions.

Leave a comment and let us know what you think.


Viewing all articles
Browse latest Browse all 3535

Trending Articles