Fibbl Hint

A standalone component that shows a tooltip for any HTML element (usually a button). The main purpose is to attract user's attention. Once it's closed, it will not appear within a certain period of time.

It uses localStorage, so it may not work for your in Codepen-like playgrounds. Try it out locally.

The component doesn't require you to change the existing markup, it's just an unobtrusive addition to it. The hint component as such isn't to be created manually. Instead, you need to use fibbl-hint-trigger - an invisible component that will create the hint. This approach is used to

• Avoid changes of the existing markup and styles (e.g. using a wrapper component).
• Provide a way to show/remove the hint programmatically (the hint is removed when the trigger is removed).

The trigger is invisible and its position in the DOM doesn't matter, so you are free to add it where you want. It accepts a target (usually a button) selector and other options.

Code example

<script src="https://cdn.fibbl.com/fibbl-hint.js" type="module"></script>

<!-- Existing button, just add an id to it, if needed -->
<button id="start3d" style="margin: 5em;">Start 3D</button>
<fibbl-hint-trigger
    data-target-selector="#start3d"
    data-text="3d"
    data-placement="right"
></fibbl-hint-trigger>

Actually, since the trigger accepts a CSS selector, you may add it right before the target element and use the fibbl-hint-trigger + * selector instead to not add an id to the button (if you have more than 1 hint on page, then the selector must be more specific).

Custom attributes

• data-target-selector - a selector of an HTML element for which you want to show the hint.
• data-text - either a predefined key word: 3d, images, ar, vto or any custom string. The keywords will be replaced with the corresponding phrases.
• data-placement - either top, bottom, left, right. Determines the position of the hint relative to the target. The hint can change its position automatically, if there isn't enough space.

Styles

To style the hint itself, you should use .fibbl-hint class. Since the hint isn't a simple element, some properties are exposed as CSS vars (you should use them instead of usual CSS, otherwise the result will be incorrect):

.fibbl-hint {
    /* the CSS vars */
    --background-color: azure;
    --border-color: lightgray;
    --border-width: 1px;
    --arrow-size: 0.5em;
    /* other props */
    color: black;
    font-family: monospace;
    z-index: 100; /* most probably you will want to change it */
}

And it's NOT recommended to use all: unset; for this component, because it must preserve its default absolute position.

If you want to temporarily disable all the hints on a page, you can just replace the script

<script src="https://cdn.fibbl.com/fibbl-hint.js" type="module"></script>

with the following style:

<style> fibbl-hint-trigger { display: none; } </style>

Once you remove the script it will stop working, and the style is needed to make all the trigger elements truly invisible (because without the script the corresponding styles will not be applied to them automatically).

But if you don't plan to enable it back in a while, then it's better to remove all the trigger elements.