Extraordinary Tooltips en

Installations 8 Likes 6

Allows the creation of complex tooltips allowing full HTML markup and "unlimited" content from an entity’s entry or an attribute. Compared to standard Kanka tooltips, this plugin offers the following benefits:

No size limit (as much content as you can fit in an attribute or entry); scrollbars are provided if necessary.
The tooltips can be triggered not only by entity mentions, but by any text, image or other element that has the required HTML classes.
Tooltip content is interactive: you can select text, click links, even hover mentions inside your tooltip to see the standard Kanka tooltip pop up on them. By comparison, standard tooltips close as soon as you move your pointer away from the originating mention, making them "view only".
More HTML support: anything you can use in an entry or attribute is fully rendered, rather than the limited layout in standard tooltips.
Some cascading transclusion is also possible (mentioning an attribute that contains other attribute values, or even a transcluded entry).
Multiple entries or attributes can be merged into one tooltip.

This plugin is not for the faint of heart! You will need to edit HTML for every tooltip you create, copy entity and attribute IDs and keep track of where your transcluded content comes from. You will also need some CSS proficiency to fully adapt the tooltips to your content. This way lies madness... and frigging awesome tooltips.

I highly recommend using my Marketplace Toolbar for Summernote to have access to a form that lets you choose each tooltip’s settings and quickly generate the necessary HTML without having to check the documentation.

For instructions on how to use this plugin, please visit this Github page since the Marketplace doesn’t allow sufficient formatting. I’m not kidding when I say this gets complicated fast – though you can still get some mileage out of the default settings:

Shout-out to Dschäykib who sent me down this rabbit hole with his excellent blog post on cross-references.

Making this was a labour of love and doggedness involving six months of research and experimentation, and it all started with Jay saying "eww" to my request for HTML in tooltips (back when they ignored HTML tags completely). Well Jay, life finds a way.

Want to show appreciation for my plugins or request one-on-one CSS help? I accept tips on Ko-fi (no account needed):

Latest version b5 View content

Released 1 year ago

Improved fade in/out logic on hover so fixed tooltips no longer open on their own at page load.

Plugin CSS for b5


:root {
	--summernote-insert-extraordinary-tooltips: enabled;
	--ExT-trigger-icon: " \f00e";
	--ExT-trigger-icon-font: "FontAwesome";
}

/* Style the trigger word/phrase */
.ExT-trigger {
	display: block; /* So that standalone triggers don’t occupy full container width */
	width: max-content;
	position: relative;
	color: var(--link-hover); /* Make triggers that aren’t links stand out a little */
}
/* Add invisible space under the trigger so the element doesn’t
lose focus while moving the pointer to the tooltip, in affixed mode */
.ExT-trigger::before {
	position: absolute;
	content: "";
	height: 20px;
	width: 100%;
	bottom: -15px;
	left: 0;
}
/* Add an optional indicator that ExT is active here */
.ExT-trigger::after {
	content: var(--ExT-trigger-icon, " \f00e");
	font-family: var(--ExT-trigger-icon-font, "FontAwesome");
	font-weight: 400;
	font-size: 12px;
}
.ExT-trigger.no-icon::after {
	content: "";
}
/* Hide Kanka tooltips on triggers and the main entity title */
.ExT-trigger > .tooltip,
.ExT-wrapper .entity-mention-name + .tooltip {
	display: none !important;
}

/* Position and toggle affixed tooltips */
.ExT-wrapper.affixed {
	display: none;
}
.ExT-trigger:hover + .ExT-wrapper.affixed,
.ExT-wrapper.affixed:hover {
	display: block;
	position: relative;
	overflow: hidden;
}

/* Position and animate fixed tooltips */
.ExT-wrapper.fixed {
	position: fixed;
	z-index: 10;
	top: 50%;
	left: 50%;
	overflow: hidden;
	transition: 0.5s opacity; /* mouseout transition to allow moving the pointer from trigger to tooltip before it closes */
	opacity: 0;
	z-index: -1;
	/* transform: scale(0); /* don't remember exactly what this was for, but doesn't seem necessary anymore */
}
.ExT-trigger:hover + .ExT-wrapper.fixed,
.ExT-wrapper.fixed:hover {
	opacity: 1;
	z-index: 99;
	transform: translateX(-50%) translateY(-50%);
}

/* Handle scrollbar behaviour within the tooltip */
.ExT-attribute > .attribute-mention,
.ExT-entry > .ExT-wrap {
	display: block;
	overflow: auto;
	max-width: inherit;
	max-height: inherit;
}

/* Style default tooltip container
   (other variants can be created using additional classes) */
.ExT-wrapper {
	border-radius: 10px;
	padding: 10px 10px;
	background-color: #222;
	--body-text: whitesmoke;
	color: var(--body-text);
	max-width: 80vw;
	max-height: 90vh;
	width: auto;
}
/* Entity title */
.ExT-entry .entity-mention-name {
	text-align: center;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.7;
	color: whitesmoke;
}

/* All attribute mentions in tooltips should be innocuous */
.ExT-wrapper .attribute-mention {
	background: none;
}

/* For TOC userscript, hide heading "to top" link */
.ExT-wrapper .to-top {
	display: none;
}

/* Now to handle triggers in text (paragraphs or otherwise)...
To fake inserting block content in a paragraph, we need:
1. an inline p;
2. an inline span to keep the trigger on the same line;
3. an inline p to join the second paragraph;
4. a block ::after for the bottom margin, which is ignored on inlines,
   as well as to break away anything inline that could follow. */

.ExT-inline,
.ExT-inline + .ExT-trigger,
p .ExT-trigger { /* This last one is for a standalone trigger inside a standard paragraph, for tooltips that contain only phrasing content, and won’t work otherwise */
	display: inline;
	margin: 0;
	position: relative;
}
.ExT-inline + .ExT-trigger + .ExT-wrapper + .ExT-inline::after {
	content: "";
	margin-bottom: 11px;
	display: block;
}