Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

ftw.tooltip

Package Overview
Dependencies
Maintainers
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ftw.tooltip

Apply tooltips dynamically

  • 2.0.0
  • PyPI
  • Socket score

Maintainers
12

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.

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]

FAQs


Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc