Balloons with tips for using the system (Tour)

Question

What I want is to know what name is given to those tips that appear to assist in the use of a system when we first enter it.

For example, I log in to the system and a little balloon appears as if it were a modal at a certain location with a hint and a close button or forward to the next hint.

I need to implement this in a PHP system (Laravel 5), if you have some project on github or something like that would help a lot, but as I don’t even know the exact name it is difficult to find.

Like this here:

Answer 1

In doing a little research, I’ve come to the conclusion that this is called Tour.

The Tour may use different types of dialogs, such as Modals or Tooltips.

• Modals are those dialogues aimed at requiring attention to the user’s action.
• Tooltips are small balloons with information or actions for the user. In my opinion, unlike the modals, this does not prevent the user to continue interacting with the page, even if it is open.

For those who use Bootstrap, I found the Bootstrar Tour, which has a system very similar to the one shown in the question.

I also found the Product Tour.

Demo:

_{The latter seems to be more independent than previously shown, since it requires Bootstrap.}

Answer 2

Note that in addition to the name "tour" can be called step-by-step guide (step by step guide), search terms such as hightlight intro can also help

@Renan has specified the http://introjs.com, the use of it is practical, just use the attributes:

• data-step="" numeric value, to say when it should appear, if 1 will be the first, if 2 will be the second and so on, this parameter is optional and only serves to ensure the order you want them to be displayed
• data-intro="" contains the text with the guidelines

• data-position="", where the tooltip should appear, possible values:

  • left the left of the pointed element
  • right to the right of the pointed element
  • top above the pointed element
  • bottom below the pointed element

For example:

<div class="profile" data-step="1" data-intro="Aqui tem os dados do seu perfil">
..
</div>

<div class="notifications" data-step="2" data-intro="Aqui contem as notificações, também é exibido &quot;pushs&quot; informando sobre novas notifiações">
..
</div>

<div class="apps" data-step="3" data-intro="Aqui contem todos apps mais usados">
..
</div>

To start the tour you need to run the script introJs().start();, can do so:

document.getElementById("iniciar-tour").onclick = function() {
    introJs().start(); 
};

html:

<button id="iniciar-tour">Como usar</button>

Or on the onload:

window.onload = function () {
    introJs().start();
};

To download go to the https://github.com/usablica/intro.js/releases

Example:

window.onload = function () {
    introJs().start();
};

html, body {
    margin: 0;
    padding: 0;
}

.profile, .notifications, .apps {
    height: 26px;
    margin: 50px;
    background: #fc0;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.3.0/introjs.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.3.0/intro.min.js"></script>

<div class="profile" data-step="1" data-intro="Aqui tem os dados do seu perfil">
...
</div>

<div class="notifications" data-step="2" data-intro="Aqui contem as notificações, também é exibido &quot;pushs&quot; informando sobre novas notificações">
...
</div>

<div class="apps" data-step="3" data-intro="Aqui contem todos apps mais usados">
...
</div>

Answer 3

A very simple example for your tooltip. Then just shape the css to your liking.

 a.tooltips {
          position: relative;
          display: inline;
        }
        a.tooltips span {
          position: absolute;
          width:140px;
          color: #FFFFFF;
          background: #000000;
          height: 30px;
          line-height: 30px;
          text-align: center;
          visibility: hidden;
          border-radius: 6px;
          box-shadow: -1px 0px 0px #800000;
        }
        a.tooltips span:after {
          content: '';
          position: absolute;
          top: 100%;
          left: 50%;
          margin-left: -8px;
          width: 0; height: 0;
          border-top: 8px solid #000000;
          border-right: 8px solid transparent;
          border-left: 8px solid transparent;
        }
        a:hover.tooltips span {
          visibility: visible;
          opacity: 0.8;
          bottom: 30px;
          left: 50%;
          margin-left: -76px;
          z-index: 999;
        }

<br>
<br>
<br>
<br>
<br>

<a class="tooltips" href="#">Exemplo
<span>Tooltip</span></a>