DnD5 Condition Tooltips en

Installations 33 Likes 3

A companion theme for my DnD5 Conditions content pack. This theme decorates tooltips on links that point to those conditions to look more like excerpts from the rulebook.

Note that links generated by Kanka (e.g. in entity lists, as opposed to mentions created by users in entities) do not allow the same flexibility in styling and have lower opacity. You can cancel that see-through effect on all tooltips across your campaign by adding the following CSS to your campaign styles in Campaign > Theming:

/* Full opacity on tooltips */
.tooltip.in {
	opacity: 1;
}

You can create more entities that will use the same styling by giving them the DD5 Condition tag and wrapping their entries in the "dd5-condition" class in code view, like so:

<div class="dd5-condition">
  <p>Description</p>
</div>

Troubleshooting

I can see the fancy tooltips, but my players only see default tooltips

If your campaign does not allow some users or roles to see tags, this theme will not work for them. They at least need read access to the DD5 Condition tag.

Fancy tooltip

Latest version 1.2 View content

Released 1 month ago

Updated selectors to match the new mention tag slug syntax in Kanka 1.40.
Fixed background colors to account for 1.41’s tooltip styling update.

Plugin CSS for 1.2


/* BEGIN DnD5 Condition Tooltips by Salvatos */
/* Fix opacity on mentions (not possible on Kanka-generated links) */
a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip.in {
	opacity: 1;
}
/* Style container */
a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip .tooltip-inner,
a:not(.entity-mention) + .tooltip .kanka-tag-dd5condition {
	max-width: 400px;
	background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/OnfHKKTT4rtOeeQZLHwv1ddpZtKMJbykZ52WUwsg.jpg), #dbcbae;
	padding: 5px 8px;
}
/* Extras that only work on the outer container */
a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip .tooltip-inner {
	--tooltip-background: transparent;
	border: 4px solid #333;
}
/* Style name */
:is(a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip, .tooltip .kanka-tag-dd5condition) .entity-name {
	font-family: "Andada Pro", serif;
	font-variant: small-caps;
	font-size: 15px;
	font-weight: bold;
	text-align: left;
	text-decoration: underline;
	color: #a4280b;
}
:is(a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip, .tooltip .kanka-tag-dd5condition) .entity-tooltip-avatar {
	margin: 5px 0 0;
	text-align: left;
}
/* Style description */
a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip .dd5-condition {
	color: #222;
}
/* Darker text where opacity is reduced */
.tooltip .kanka-tag-dd5condition .dd5-condition {
	color: #000;
}
/* Style paragraphs: mimic list items, which are not parsed in tooltips */
:is(a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip, .tooltip .kanka-tag-dd5condition) .dd5-condition p::before {
	content: "• ";
}
:is(a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip, .tooltip .kanka-tag-dd5condition) .dd5-condition p {
	font-family: "Libre Baskerville", sans-serif;
	font-size: 12px;
	margin-bottom: 5px;
}
/* Hide tags*/
:is(a.entity-mention[data-entity-tags~="dd5condition"] + .tooltip, .tooltip .kanka-tag-dd5condition) .tooltip-tags {
	display: none;
}
/* END DnD5 Condition Tooltips by Salvatos */