Python Tales and Plone Stories

4teamwork

ftw.tooltip Introduction - Add Tooltips to Your Plone Site

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
from zope.component import adapts
from zope.interface import implements, Interface
from ftw.tooltip.interfaces import ITooltipSource
from ftw.tooltip import _


class DemoStaticTooltipSource(object):
    """Tooltips for the @@sharing view"""

    implements(ITooltipSource)
    adapts(Interface, Interface)

    def __init__(self, context, request):
        self.context = context
        self.request = request

    def global_condition(self):
        return True

    def tooltips(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.

1
2
3
 <adapter
    factory="your.product.tooltips.DemoStaticTooltipSource"
    name="my_demo" />

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:

1
2
3
4
5
def tooltips(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.

Comments