A small documentation/demo game suggestion related to tooltips

Hey there! First a big thanks for creating this engine. I was struggling to get Ren’py to do what I wanted and so far Narrat is a much easier solution.

One small thing: Out of the box editing the demo game, I couldn’t get tooltips to work, as there was no tooltips.yaml file and index.ts does not reference tooltips.

I was able to figure out that I’d need to create the yaml file based on the documentation, but it looks like it currently references an old requirement to direct config.yaml to the tooltips file, rather than including tooltips in index.ts. I figured that change out based on the “Config files hot reloading” page.

Edit: While I was able to get the tooltips to pop up, they seem to default to small black text and I’m having trouble getting CSS to change the look. I may have to start up a help thread, but I’m plugging away at it!

If you’ve had fo figure out how it works and what’s wrong in the docs, feel free to update the docs if you want to. They’re in markdown format which is pretty easy to edit and you can edit them directly on the github. There’s links on the docs pages to edit.

Or you can install the narrat repository locally and run the docs on your machine to preview them if you want to do more complex changes.

There’s a bit of info on how docs work at the end of the readme narrat-engine/README.md at main · liana-p/narrat-engine · GitHub

1 Like

Hey there, I’d be happy to update the documentation if I can get it working. I’m still having trouble with the CSS styling, and I think I’ve discovered something odd going on. I’m pretty new at this, so apologies if I’m just missing something or if I should move this to Help at this point.

I’ve now tested implementing tooltips on two versions of Narrat. In both cases, I can get the tooltips to appear, but on the earlier version (3.7.1) they show up with the style suggested by the default CSS (orange border, red title, white text). On the newer version (3.10.4) they show up with black text.

Here are some screenshots.

On the earlier version:

On the later version:

The second thing I’m running into is that I can successfully alter the CSS for the tooltip text in the dialogue box, but not for the actual tooltip pop-up. I did an inspection and found a series of CSS styles that I’ve messed with (attempting to change all the tooltip text to green):

#narrat {
  --bg-color: #131720;
  --text-color: #d9e1f2;
  --primary: hsl(255, 30%, 55%);
  --focus: hsl(210, 90%, 50%);
  --secondary: #42b983;

  --tooltip-background: #331d00;
  --tooltip-border: 1px solid green !important;
  --tooltip-border-radius: 5px;
  --tooltip-title-font-size: 1.2rem;
  --tooltip-font-size: 1rem;
  --tooltip-title-color: green !important;
  --tooltip-color: green !important;
  --highlighted-tooltip-keyword-color: green !important;
  --highlighted-tooltip-keyword-font-size: 1.1em;
  --highlighted-tooltip-keyword-font-weight: bold;

  .floating-tooltip-title {
    font-size: var(--tooltip-title-font-size);
    color: var(--tooltip-title-color);
    font-weight: 700;
    margin-bottom: 5px;
  }

  .floating-tooltip-text {
    font-size: var(--tooltip-font-size);
    color: var(--tooltip-color);
  }

  .highlighted-tooltip-keyword {
    color: var(--highlighted-tooltip-keyword-color);
    font-size: var(--highlighted-tooltip-keyword-font-size);
    font-weight: var(--highlighted-tooltip-keyword-font-weight);
    -webkit-user-select: auto;
    user-select: auto;
    pointer-events: all;
  }
}

And the results:
tooltip changed