[CSS] Styling tooltips

I have a bone to pick with Kanka’s tooltips. They’re ugly. The text is too small. They get in the way. They run off-screen and get cropped by parts of the interface. They don’t render all HTML tags. They can’t be interacted with. Sometimes I hide them completely, sometimes I replace them with Extraordinary Tooltips. Sometimes I make them prettier.

That last one is what I did for my DnD5 Condition Tooltips content pack and theme, and what I’m going to help you do for your own campaign in this guide.

HTML structure of a tooltip

Since Kanka’s tooltips are created via JavaScript when you hover a link and disappear from the page source when you move your pointer away, they can be very difficult to inspect and style in real time. To save you the trouble, you can copy the one below (current as of Kanka 1.41 or April 2023) and paste it somewhere in your page inspector panel to see how your CSS changes affect it in real time. I will detail each component below.

<div class="tooltip fade bottom in" role="tooltip" id="tooltip36730" style="top: 154.5px; left: 300.417px; display: block;">
  <div class="tooltip-arrow" style="left: 50%;"></div>
  <div class="tooltip-inner tooltip-ajax text-left p-1">
    <div class="tooltip-content p-1 kanka-tag-42081 kanka-tag-titans kanka-tag-42082 kanka-tag-biome">
      <div class="flex gap-2 items-center mb-1">
        <div class="flex-none">
          <div class="entity-image w-15 h-15 cover-background" style="background-image: url('https://images.kanka.io/user/....png ');"></div>
        </div>
        <div class="grow entity-names">
          <span class="entity-name text-xl block">Mellik</span>
          <span class="entity-subtitle text-base block">Title optional</span>
        </div>
      </div>
      <div class="tooltip-tags mb-1">
        <span class="tooltip-tag inline-block" data-id="529692" data-tag-slug="titans">
          <span class="badge label color-tag label-default rounded-sm px-2 py-1">Titans</span>
        </span>
        <span class="tooltip-tag inline-block" data-id="529694" data-tag-slug="biome">
          <span class="badge label color-tag label-default rounded-sm px-2 py-1">Biome</span>
        </span>
      </div>
      <div class="tooltip-text text-sm">
        <p>Entry content... </p>
      </div>
    </div>
  </div>
</div>

The first outer div is one you probably won’t need to worry about, unless you want to change the opacity. If you do, this is the default rule you need to override:

.tooltip.in {
	filter: alpha(opacity=90);
	opacity: .9;
}

/* Unset opacity and filter */
.tooltip.in {
	filter: unset;
	opacity: initial; /* Or unset, or 1... */
}

On the second level, .tooltip-inner and .tooltip-arrow mainly control the background color, but you could also play with the arrow’s dimensions or positioning:

.tooltip.bottom .tooltip-arrow {
	top: 0;
	left: 50%;
	margin-left: -5px; /* Change this to move off center */
	border-width: 0 5px 5px; /* Change this for a bigger or smaller arrow */
	border-bottom-color: #000; /* Change this for the arrow’s color */
}
.tooltip.top .tooltip-arrow {
	bottom:0;
	left:50%;
	margin-left:-5px;
	border-width:5px 5px 0;
	border-top-color:#000
}

Note that .tooltip.bottom is the combination of classes that applies when the arrow is at the top, meaning the tooltip was generated under the pointer. When the tooltip is generated above the pointer, .tooltip.top applies instead, with different settings to position the arrow under the box (bottom: 0 instead of top: 0, and different border widths).

.tooltip-inner is where you would change the max-width, border radius, colors, and text alignment for the overall container:

.tooltip-inner {
	border-radius: 4px;
}
.tooltip-ajax {
	max-width: 378px !important;
}
.tooltip-inner, .tooltip-content {
	background-color: var(--tooltip-background, #111);
	color: var(--tooltip-text, #eee);
}
.text-left {
	text-align: left;
}

As you can see, you can set --tooltip-background and --tooltip-text to directly control the colors for the entire tooltip without targeting specific parts.

Next is another inner wrapper, .tooltip-content. It doesn’t do much styling of its own except for a bit of padding (and reiterates the text and background colors as seen above):

.p-1 {
	padding: .25rem;
}

However, it can be extremely useful because it also has classes for each tag on the target entity, so you can have different tooltip styles for various tags. That’s a big part of how my D&D 5 tooltips work without interfering with the rest of a campaign’s tooltips. Tags are represented by both their IDs and "slugs" (simplified names) – kanka-tag-41408 kanka-tag-arcadians kanka-tag-41412 kanka-tag-pc – so you can target either using a CSS selector such as .tooltip-content.kanka-tag-arcadians.

It’s unfortunate that these classes aren’t on the outermost layer, but with support for the :has() pseudo-class increasing, in the not-too-distant future you could use something like .tooltip.in:has(.tooltip-content.kanka-tag-arcadians) to set the opacity on the main div based on tags, and likewise for other wrappers above this one. If you look at the CSS for DnD5 Condition Tooltips, you’ll see I chose not to do that for now because it’s not fully supported on Firefox and mobile browsers yet, but we’re getting there.

The next layer doesn’t have a very recognizable class but is a flexbox for the entity’s image (if enabled in your campaign’s Interface settings), name and title (for characters). The background-image is set inline and it is subject to the following rules, which you can override to alter the sizing, position, etc.:

.cover-background {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: 50% 50%;
}
.entity-image {
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: block;
}

Note that .entity-image is used in other places in Kanka, so you probably don’t want to use just that selector to make tooltip-specific changes.

.entity-names, .entity-name and .entity-subtitle don’t have anything too special on them other than display: block and font-related rules, and you can target them to change the font styling, center the text, etc.

After the heading section, you have .tooltip-tags, which simply shows the entity’s tags. You may want to hide them entirely or change their size or margins.

And lastly, .tooltip-text contains the actual excerpt from the entity and is the class you would target for font styling that differs from the rest of the tooltip, or perhaps add a border. Note that depending on your campaign’s CSS, you may need to target specifically .tooltip-text p or other elements to override global rules.

And that’s about it! If this guide helped you, please consider supporting my work with a tip on my Ko-fi page =) I am also sometimes available for commissions to help directly with your plugins or CSS.