Start

Javascript extension ui.hint allows showing hints on a page.

Connecting on a PHP page

\Bitrix\Main\UI\Extension::load("ui.hint");

How to use

It's enough to indicate data-hint attribute in html with the following text:

<span data-hint="My first hint"></span>

Initialize a hint in JS code. Hints are created for all container child elements:

BX.UI.Hint.init(BX('container'));

Example:

<?
\Bitrix\Main\UI\Extension::load("ui.hint");
?>

<script type="text/javascript">
    BX.ready(function() {
        BX.UI.Hint.init(BX('my-container'));
    })
</script>

<div id="my-container">
   <div>
        Hint 1  
        <span data-hint="<?=Loc::getMessage('MY_HINT_1')?>"></span>
    </div>

    <div>
        Hint 2 
        <span data-hint="<?=Loc::getMessage('MY_HINT_2')?>"></span>
    </div>
</div>

Use in JavaScript

When generating layout in JS, you can get an element for inserting from text:

containerElement.appendChild(
    BX.UI.Hint.createNode("My second hint.")
);