ftw.tooltip 2.0.0

简介

使用 ftw.tooltip，您可以动态地将工具提示添加到每个DOM元素，这些元素可以通过jQuery选择，并允许使用title属性。

安装

将 ftw.tooltip 添加到您的buildout配置中

[instance]
eggs =
  ftw.tooltip

导入 ftw.tooltip 默认配置文件。

用法

基本上，您需要注册命名的 ITooltipSource 适配器。它们将被视图查询，视图将生成必要的JS代码。

有两个示例工具提示源适配器，以展示它们的工作方式

• 静态文本示例。

• 动态文本示例，读取所选DOM元素的title属性。

您可以通过注册以下适配器在您的网站上加载这两个示例

>>> from ftw.tooltip.demo_tooltip_source import (DemoStaticTooltipSource,
...    DemoDynamicTooltipSource)
>>> from zope.component import provideAdapter
>>> provideAdapter(DemoStaticTooltipSource, name="demo1")
>>> provideAdapter(DemoDynamicTooltipSource, name="demo2")

或者如果您正在使用zcml

<adapter
    factory="ftw.tooltip.demo_tooltip_source.DemoStaticTooltipSource" name="demo1" />
<adapter
    factory="ftw.tooltip.demo_tooltip_source.DemoDynamicTooltipSource" name="demo2" />

• “demo1”在 #portal-logo 上放置工具提示。

• “demo2”在所有全局导航元素上放置工具提示，并显示给定的title属性作为工具提示。

示例

定义一个新的 ITooltipSource 适配器很容易。以下示例将只对文件夹类型显示工具提示“这是编辑栏”（检查global_condition），当然，只有当“documentEditable” CSS类可用时才会显示。

>>> 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'}]

使用ZCML注册适配器

>>> <adapter
...    factory="your.module.EditBarTooltip" name="my_edit_bar_tooltip" />

您可能想使用自己的工具提示布局：只需注册一个名为“ftw_tooltip_layout”的浏览器视图并返回您偏好的工具提示布局。

或者，您可以通过注册一个名为“ftw_tooltip_custom_config”的浏览器视图完全自定义工具提示参数 - 查看jQuerytools文档以获取更多详细信息。

小型定制示例

{
    offset: [-10, 10],
    position: 'right center',
    opacity: '0.7',
}

示例：使用现有HTML的工具提示

还可以使用一个HTML标签作为数据源（必须是选择器的兄弟元素），而不是使用title属性。在这种情况下，只需要进行小小的调整。

ITooltipSource适配器应将js-selector返回到content属性中，而不是text属性中。

>>> 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'}]

HTML结构中唯一需要关注的约束是，content标签必须是selector标签的兄弟元素。例如：

... <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>

链接

• Github: https://github.com/4teamwork/ftw.tooltip

• 问题： https://github.com/4teamwork/ftw.tooltip/issues

• Pypi: http://pypi.python.org/pypi/ftw.tooltip

• 持续集成： https://jenkins.4teamwork.ch/search?q=ftw.tooltip

版权

本软件包版权属于4teamwork。

ftw.tooltip使用GNU通用公共许可证，版本2。

变更日志