Context-Aware Classes

Context-Aware Classes en

Salvatos 2 0

Provides handy classes to hide or show content based on where it is displayed, for example in a dashboard, an entity, a tooltip, etc. You could use them to omit excessive details from dashboard widgets without having to use a different entity or move content to entity notes, or on the contrary provide a note when only an excerpt of the entity is seen. You could also hide certain large elements from view for mobile users, for example large images or tables that are difficult to navigate.

You can use these class names for any type of element in the HTML view of the editor:

class="editor-only": Visible in the Summernote editor only (useful for reminders or placeholders in entity templates)
class="tooltip-only": Tooltip only class="no-mobile": No mobile class="mobile-only": Mobile only class="no-dashboard": No dashboard class="dashboard-only": Dashboard only class="no-map": Nowhere on a map (Explore or dashboard widget view) class="marker-only": Map marker only class="marker-details-only": Map sidebar details only
class="print-only": Only in print mode (note: will likely not show in previews)
class="no-print": Exclude from print

This plugin supports the Marketplace Toolbar for Summernote! You can install this user script with a browser extension to insert the necessary HTML in your entities without memorizing or referencing this page.

Note that tooltip-only and marker-only are only effective at or very near the top of an entry, since tooltips grab the first so many characters. In addition, while we can hide content from anything except tooltips, we can’t exclude content from tooltips since they completely ignore HTML. You could potentially circumvent this by adding a lot of spaces at the end of your tooltip-only content to "push off" the rest of the entry.

If you have ideas for other classes to add to this theme, feel free to suggest them on Discord.

Latest version: 1.3 View Content
Released 1 month ago
  • Added an editor-only rule