JSFiddle - React, Tailwind, and code Playground

by apoucoz

HTML

<link rel="stylesheet" href="http://imapo.ru/css/jBox.css">
<script src="http://imapo.ru/js/jBox.min.js"></script>
<link rel="stylesheet" href="http://imapo.ru/css/ModalBorder.css">
<link rel="stylesheet" href="http://imapo.ru/css/NoticeBorder.css">
<link rel="stylesheet" href="http://imapo.ru/css/TooltipBorder.css">
<link rel="stylesheet" href="http://imapo.ru/css/TooltipDark.css">
<a href="http://www.apo-ucoz.com/" target="blank" class="apotitle" title="Перейти на APO-UCOZ">Базовое использование</a>
<br/>
<br/>
<a href="#" class="apotitle2" newcontent="Перейти на APO-UCOZ: <a href='http://apo-ucoz.com' target='blank'>Клик</a>" newtitle="Заголовок из тег newtitle">Использование опций</a>
<br/>
<br/>
<a href="#" id="apomodal">Вызвать модальное окно</a>
<br/>
<br/>
<a href="#" onclick="apomod()">Вызвать модальное окно с расширенными возможностями</a>
<br/>
<br/>
<a href="#" id="apoconfirm">Использование окон-подтверждалок</a>
<br/>
<br/>
<a href="http://imapo.ru/img/x_d2a6ad91.jpg" title="My title 1" data-jbox-image="gallery1"><img src="http://imapo.ru/img/x_d2a6ad91.jpg"></a>
<a href="http://imapo.ru/img/x_eefc1cea.jpg" title="My title 2" data-jbox-image="gallery1"><img src="http://imapo.ru/img/x_eefc1cea.jpg" alt=""></a>
<a href="http://imapo.ru/img/x_f55b7b4d.jpg" title="My title 3" data-jbox-image="gallery1"><img src="http://imapo.ru/img/x_f55b7b4d.jpg" alt=""></a>

CSS

body {
    height:1000px;
}

img {
    width:200px;
    height:150px;
    opacity:0.5;
}

JavaScript

$(document).ready(function () {
    /* Ипользование подсказок */
    $('.apotitle').jBox('Tooltip');
    $('.apotitle2').jBox('Tooltip', {
        id: 'apoid', // Уникальный ID блока с подсказкой
        width: 300, // Фиксированная ширина подсказки
        height: 100, // Фиксированная высота подсказки
        maxWidth: 400, // Максимальная ширина подсказки
        maxHeight: 150, // Максимальная высота подсказки
        trigger: 'click', // Открывать при клике или наведении (click, mouseenter)
        preventDefault: 1, // Запрет взаимодействия со ссылками внутри подсказки
        title: 'Это заголовок подсказки, если не указан атрибут, из которого брать содержимое',
        content: 'Это текст на тот случай, если не указан атрибут, из которого брать содержимое',
        getTitle: 'newtitle', // Из какого атрибута брать заголовок для подсказки
        getContent: 'newcontent', // Из какого атрибута брать текст для подсказки
        target: $('.apotitle2'), // Для какого элемента вывести подсказку
        position: {
            x: 'right', // Позиция вывода по оси x (left, right, middle)
            y: 'bottom', // Позиция вывода по оси y (top, bottom, middle)
        },
        offset: {
            x: 10, // Сдвиг подсказки по оси x
            y: -5 // Сдвиг подсказки по оси y
        },
        fixed: 0, // Фиксированная или статичная подсказка (0, 1)
        reposition: 0, // Перестраивать позицию подсказки при изменении размера экрана (0, 1)
        repositionOnOpen: 0, // Перестраивать позицию подсказки при первом открытии (0, 1)
        repositionOnContent: 0, // Перестраивать позицию подсказки при изменении содержимого подсказки (0, 1)
        fade: 1, // Использовать ли эффект плавного появления и угасания (0, 1)
        animation: 'flip', // Тип анимации (zoomIn, zoomOut, pulse, move, slide, flip, tada)
        theme: 'TooltipBorder', // Цветовая схема подсказки (ModalBorder, NoticeBorder, TooltipBorder, TooltipDark)
        addClass: 'newclass', //...