DnD5 Condition Tooltips

DnD5 Condition Tooltips

Install
Salvatos
29th Nov, 2023
60 installations 7 likes

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. You can also create more entities that will use the same styling by simply giving them the DD5 Condition tag!

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 their tooltips. If you notice that the outer border looks different in those places, that is normal (albeit not intended).

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.

Latest version 2.1

Released 1 year ago on 29th Nov, 2023

  • Slightly darker description text to improve legibility over the background.
  • Improved list formatting for the Exhaustion condition.

CSS rules

/* BEGIN DnD5 Condition Tooltips by Salvatos */
/** Style outer container (requires :has) **/
/* Background */
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box {
	background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/OnfHKKTT4rtOeeQZLHwv1ddpZtKMJbykZ52WUwsg.jpg), #dbcbae;
	padding: 5px 8px;
}
/* Border and arrow */
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box {
	padding: 0;
	border: 3px solid #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="bottom"]>.tippy-arrow:before {
	border-bottom-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="top"]>.tippy-arrow:before {
	border-top-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="left"]>.tippy-arrow:before {
	border-left-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="right"]>.tippy-arrow:before {
	border-right-color: #333;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="top"] > .tippy-arrow {
	bottom: -1px;
}
body:has(a.entity-mention[data-entity-tags~="dd5condition"][aria-expanded="true"]) .tippy-box[data-placement^="bottom"] > .tippy-arrow {
	top: -1px;
}
/* Fallback for :has */
@supports not (body:has(a.entity-mention)) {
	.tooltip-content.kanka-tag-dd5condition {
		background: url(https://kanka-user-assets.s3.eu-central-1.amazonaws.com/entities/files/OnfHKKTT4rtOeeQZLHwv1ddpZtKMJbykZ52WUwsg.jpg), #dbcbae;
		padding: 5px 8px;
		border-radius: 3px;
	}
}
/** Style inner container **/
/* Style name */
.tooltip-content.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;
}
/* Hide tags*/
.tooltip-content.kanka-tag-dd5condition .tooltip-tags {
	display: none;
}
/* Style paragraphs: mimic list items, which are not parsed in tooltips */
.tooltip-content.kanka-tag-dd5condition p::before {
	content: "• ";
}
.tooltip-content.kanka-tag-dd5condition p {
	font-family: "Libre Baskerville", sans-serif;
	font-size: 12px;
	color: #111;
	margin-bottom: 5px;
  	hyphens: auto;
}
/* Tooltip definitions */
.tooltip-content.kanka-tag-dd5condition p a[title] {
	text-decoration: underline dotted;
	font-style: italic;
	color: inherit;
	font-family: inherit;
}
/* Exceptions for Exhaustion */
.tooltip-content.kanka-tag-dd5condition .exhaustion p:first-child::before {
	content: "";
}
.tooltip-content.kanka-tag-dd5condition tr:not(:last-child) {
	border-bottom: 1px dotted #777
}
.tooltip-content.kanka-tag-dd5condition table {
	font-family: "Libre Baskerville", sans-serif;
	font-size: 12px;
	color: #111;
	vertical-align: baseline;
  	margin-bottom: 5px;
}
.tooltip-content.kanka-tag-dd5condition td {
	padding-left: 5px;
}
.tooltip-content.kanka-tag-dd5condition th {
	padding-inline: 2px 5px;
	border-right: 1px dotted #777;
	font-weight: normal;
}
/* END DnD5 Condition Tooltips by Salvatos */

Font @import rules

@import url('https://fonts.googleapis.com/css2?family=Andada+Pro:wght@500&family=Libre+Baskerville&display=swap');
 Install

User comments & reviews