JSFiddle - React, Tailwind, and code Playground

by Sasha Ulych

HTML

<link rel="stylesheet" href="http://media1.juggledesign.com/qtip2/css/demos.css">
<script src="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.js"></script>
<link rel="stylesheet" href="http://craigsworks.com/projects/qtip2/packages/latest/jquery.qtip.min.css">
 <a class="begin" href="javascript:void(0)">Show Help</a>
<h2>Step by step tooltips</h2>
<p class="block1">
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nit cupid, written by Cicero in 45 BC
</p>
<br><br><br><br><br>
<p class="block2">
"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae elit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"
1914 translation by H. Rackham
</p>
<br><br><br><br><br>
<p class="block3">
"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I will give you a complete account of the system, and expound the actual teachings of tre extremely painful. Nor again is there anyone who loves or pursues or desires to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?"
</p>

    <div class="clear">&nbsp;</div>
    <a class="prev" href="#">&laquo; Previous</a>
    
    <a class="next" href="#">Next &raquo;</a>

    
    <div class="clear">&nbsp;</div>

CSS

.qtip-titlebar {
    /* make room for both buttons */
    padding-right: 50px;
}

.qtip-titlebar .qtip-next {
    color: #111;
    cursor: pointer;
    position: absolute;
    right: 26px;
    top: 50%;
    margin-top: -9px;
}

.qtip-titlebar .qtip-next span {
    border: #aaa 1px solid;
}

JavaScript

/* Important part - our steps. 
*    This contains an array of objects, each containing the properties of
*   the tooltip for each step. For this example we use only:
*
*      position.target    content.text       content.title
*   
*   You can obviously expand this as you require, but be sure to update the
*   custom event code to set the new properties if you do!
*/
var steps = [
        { target: $('.block1'), title: 'Helper', content: '<div class="block1">Step1</div>' },
        { target: $('.block2'), title: 'Step2', content: '' },
        { target: $('.block3'), title: 'Step3', content: '' }
    ],
    goto = function(n){
        // Trigger the tooltip event
        $('#qtip-step').triggerHandler(n ? 'next' : 'prev');
        // show the tooltip, in case it is hidden
        $('#qtip-step').qtip('api').show();
    },
    nxt = '<a class="qtip-icon qtip-next" title="Next Tooltip" aria-label="Next Tooltip" role="button"><span class="ui-icon">&raquo;</span></a>';
    pre = '<a class="qtip-icon qtip-prev" title="Prev Tooltip" aria-label="Prev Tooltip" role="button"><span class="ui-icon">&laquo;</span></a>';
    ;

$(document).ready(function()
{
    $(document.body).qtip({
        id: 'step', // Give it an ID of qtip-step so we an identify it easily
        content: {
            text: steps[0].content, // Use first steps content...
            title: {
                text: steps[0].title, // ...and title
                button: true
            }
        },
        position: {
            my: 'top center',
            at: 'bottom center',
            target: steps[0].target, // Also use first steps position target...
            viewport: $(window) // ...and make sure it stays on-screen if possible
        },
        show: {
            event: false, // Only show when show() is called manually
            ready: true // Also show on page load
        },
        hide: false, // Don't' hide unless we call hide()
        events: {
            render:...