Skip to content

Hint: Hints Basics

What are we learning here?

  • How to use a Hint component

The component Hint will be loaded by default into the the level hint. It is the highest level and components in there will be even displayed in front of the blocking layers as we will explain later. So they never get blocked. They are perfect for showing short timed messages. A hint component show a message for a short time and close automatically.

The message can use newlines for line breaks and the the HTML will be sanitized before inserted into the DOM.

Use shortcut in a real implementation

The following code shows how to load a Hint into a root stage "by hand". In a real application you should use the shortcut this.hint(), which we will get to know in the next chapter.

Let's add one button into our HTML structure:

src/demo/components/loading-components/index.html

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
<div class="border rounded d-inline-block p-1 mr-2 my-1 bg-white text-dark">
  Hint
  <button class="btn btn-xs btn-info" data-role="hintInfo">
    <i style="pointer-events: none" class="fas fa-info-circle"></i>
  </button>
</div>
<div class="border rounded d-inline-block p-1 mr-2 my-1 bg-white text-dark">
  App
  <button class="btn btn-xs btn-info" data-role="appNoId">
    <i style="pointer-events: none" class="fas fa-times-circle"></i>
  </button>
  <button class="btn btn-xs btn-info" data-role="appId">
    <i style="pointer-events: none" class="pe-none fas fa-check-circle"></i>
  </button>
</div>

And add some handlers:

src/demo/components/loading-components/index.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
import { Canvas, Hint } from "@codecoupler/cc-ui";
import Mockup from "../../apps/mockup";
import { toRaw } from "vue";
import template from "./index.html";
export default class extends Canvas {
  static defaults = { target: null };
  async start() {
    this.element.innerHTML = template;
    this.element.addEventListener("click", (e) => {
      if (e.target.dataset.role) this[e.target.dataset.role]();
    });
    this.target = toRaw(this.options.target) ?? this.env.parent;
  }
  hintInfo() {
    this.target.getStage("root").load(Hint, { type: "info", text: "Hint!" });
  }
  appNoId() {
    this.target.stage.load(Mockup);
  }
  appId() {
    this.target.stage.load(Mockup, "fixed-id");
  }
}

Hint components can be loaded with an option object without namespaced options. The passed options will be mapped automatically into the correct namespace.

Now you can see the hint component in action.

As you can see we loaded the hint into the root stage of the target component. In most cases you want to display a hint about a component. To avoid the hint being displayed in a specific, smaller stage of the component, it is best to use the root stage, which covers always the whole component.