Introduction
============
With ``ftw.tooltip`` you are able to dynamically add tooltips to every DOM
element, which is selectable by jQuery and allows the title attribute.
.. figure:: http://onegov.ch/approved.png/image
:align: right
:target: http://onegov.ch/community/zertifizierte-module/ftw.tooltip
Certified: 01/2013
Installing
==========
Add ``ftw.tooltip`` to your buildout configuration:
::
[instance]
eggs =
ftw.tooltip
Import ``ftw.tooltip`` default profile.
Usage
=====
Basically you have to register named ``ITooltipSource`` adapters.
They will be queried by a view, which generates the necessary JS code.
There are two example tooltip-source adapter, to show how they work
- Static text example.
- Dynamic text example, which reads the title attribute of the selected DOM element.
You can load both examples on your site by register the following adapters::
>>> from ftw.tooltip.demo_tooltip_source import (DemoStaticTooltipSource,
... DemoDynamicTooltipSource)
>>> from zope.component import provideAdapter
>>> provideAdapter(DemoStaticTooltipSource, name="demo1")
>>> provideAdapter(DemoDynamicTooltipSource, name="demo2")
Or if you are using zcml::
<adapter
factory="ftw.tooltip.demo_tooltip_source.DemoStaticTooltipSource" name="demo1" />
<adapter
factory="ftw.tooltip.demo_tooltip_source.DemoDynamicTooltipSource" name="demo2" />
- "demo1" puts a tooltip on #portal-logo.
- "demo2" puts tooltips on every global-nav element and show the given title attribute as tooltip.
Example
=======
It's easy to define a new ``ITooltipSource`` adapter.
The following example will show a tooltip "This is the edit bar" only on
folderish types (check global_condition) and of course only if "documentEditable"
css class is available::
>>> from zope.component import adapts
>>> from zope.interface import implements, Interface
>>> from ftw.tooltip.interfaces import ITooltipSource
>>> from plone.app.layout.navigation.interfaces import INavigationRoot
>>> from Products.CMFCore.interfaces import IFolderish
>>> class EditBarTooltip(object):
... """Base demo static tooltip source. Use a given text"""
... implements(ITooltipSource)
... adapts(Interface, Interface)
...
... def __init__(self, context, request):
... self.context = context
... self.request = request
...
... def global_condition(self):
... return bool(IFolderish.providedBy(self.context))
...
... def tooltips(self):
... return [{
... 'selector': u'#edit-bar',
... 'text': u'This is the edit bar',
... 'condition': 'div.documentEditable'}]
Register the adapter with ZCML::
>>> <adapter
... factory="your.module.EditBarTooltip" name="my_edit_bar_tooltip" />
You may want to use your own tooltip layout:
Just register a BrowserView named "ftw_tooltip_layout" and return the tooltip layout you prefere.
Or you can fully customize the tooltip paramters by register a BrowserView
named "ftw_tooltip_custom_config" - check jquerytools documentation for more details.
Small customization example::
{
offset: [-10, 10],
position: 'right center',
opacity: '0.7',
}
Example: tooltip using exsting html
===================================
It's also possible to use an html-tag as data source(must be a sibling of the selctor) instead of the title attribute. For this case only a small adjustment is necessary:
The ``ITooltipSource`` adapter should return a js-selector in the ``content``
attribute instead of a text attribute::
>>> from zope.component import adapts
>>> from zope.interface import implements, Interface
>>> from ftw.tooltip.interfaces import ITooltipSource
>>> from plone.app.layout.navigation.interfaces import INavigationRoot
>>> from Products.CMFCore.interfaces import IFolderish
>>> class EditBarTooltip(object):
... """Base demo static tooltip source. Use a given text"""
... implements(ITooltipSource)
... adapts(Interface, Interface)
...
... def __init__(self, context, request):
... self.context = context
... self.request = request
...
... def global_condition(self):
... return bool(IFolderish.providedBy(self.context))
...
... def tooltips(self):
... return [{
... 'selector': u'#edit-bar',
... 'condition': 'div.documentEditable',
... 'content': u'.tabbedview-tooltip-data'}]
The only constraint in the html structure, wich must receive attention, is that the content tag must be a sibling of the selector tag. For example::
... <a href="/edit_bar" id="edit_bar"></a>
... <div class="tabbedview-tooltip-data">
... <div class="tooltip-content">
... <div class="tooltip-header">Tooltip Headeer</div>
... <div class="tooltip-breadcrumb">Lorem ipsum ...</div>
... </div>
... </div>
Compatibility
-------------
Runs with `Plone <http://www.plone.org/>`_ `4.3`.
Links
=====
- Github: https://github.com/4teamwork/ftw.tooltip
- Issues: https://github.com/4teamwork/ftw.tooltip/issues
- Pypi: http://pypi.python.org/pypi/ftw.tooltip
- Continuous integration: https://jenkins.4teamwork.ch/search?q=ftw.tooltip
Copyright
=========
This package is copyright by `4teamwork <http://www.4teamwork.ch/>`_.
``ftw.tooltip`` is licensed under GNU General Public License, version 2.
Changelog
=========
2.0.0 (2020-02-06)
------------------
- Drop Plone 4.2 support. [busykoala]
- Drop Plone 4.1 support. [jone]
- Add uninstall profile. [tinagerber]
1.1.4 (2014-03-27)
------------------
- Do not render dynamic_tooltips.js inline.
[mathias.leimgruber]
1.1.3 (2014-02-10)
------------------
- Activate dynamic tooltips to reposition it, so that they are always visible
[elio.schmutz]
1.1.2 (2013-10-21)
------------------
- Nothing changed yet.
1.1.1 (2013-01-21)
------------------
- Change behaviour of initialize tooltips on ajax calls.
- onegov.ch approved: add badge to readme.
[jone]
1.1 (2012-11-28)
----------------
- Add translations.
[jone]
- Adjust javscripts: Use $ instead of deprecated jq.
[phgross]
- Added functionality wich allows using html tags as tooltip data.
[phgross]
1.0.5 (2012-10-16)
------------------
- Wrapped <![CDATA[ around inline javascript (W3C).
[Julian Infanger]
- Fixed wrong ending of a page template file.
[Julian Infanger]
1.0.4 (2012-06-14)
------------------
- Escape tooltips. HTML should not be rendered but displayed.
This prevents JS injection.
[jone]
1.0.3 (2012-05-09)
------------------
- Use new test buildout config.
[mathias.leimgruber]
- Code cleanup (pep8/pylint)
[mathias.leimgruber]
1.0.2 (2012-04-23)
------------------
- Set delay to 0 by default.
[mathias.leimgruber]
- Trigger mousover event to activate the tooltip, otherwise
some tooltip configurations will not work (ex. predelay)
[mathias.leimgruber]
1.0.1 (2012-03-26)
------------------
- Hide default tooltip from browser.
[mathias.leimgruber]
1.0 (2012-03-19)
----------------
- Init release
[mathias.leimgruber]