Custom template

You can define your own template for the message box instead of using the default template.

Setup

var mytutorial = new Tutorial({
    steps: [
        {
            highlight: '.first-step',
            text: 'the first step',
            action: {
                template: '#custom-template'
            }
        }
    ]
});

HTML

<p class="first-step">
    This is the first step in our Tutorial!
</p>
<script type="text/template" id="custom-template">
    This is custom content inside the message box
    <span t-close>Custom close button></span>
</script>