Biblioteca de Javascript para adicionar o balão com mensagens apontando para a necessária controles de entrada

Question

Quando a minha web-carrega a página, o usuário deve ser solicitado a fazer algumas seleções em uma seqüência.

Eu quero que a mensagem de balões pop-up com mensagens de algo como - "Ei, desde que você tenha selecionado de seu país, agora selecione a província".Estes balões também deve apontar para essa seleção específica de controle.

Observe que, estes balões devem aparecer em algumas chamada de método que iria fazê-los viver, e não quando pairava como dicas de ferramentas

Quaisquer sugestões são bem-vindos

Answer 1

Dê uma olhada neste plugin: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

Eu não tenho certeza sobre sua estrutura html, mas aqui está o que você faz.No seu html, cada lugar onde você deseja que o seu "balão" que aparecer, você precisará especificar um âncora de identificação.

(Exemplos tirados da documentação oficial)

Por exemplo, se você deseja um "balão" sobre o href, então:

/* Joyride can be attached to any element with a unique ID or class, in any order */
<h3 id="yourHeaderID"></h3>
<p class="your-paragraph-class"></p>
<a id="yourAnchorID" href="#url"></a>

Depois de configurar as âncoras, você precisa definir a forma como o balão deve olhar.Para cada anchor id o seu deve especificar data-attribute com essa identificação, se não for especificado, em seguida, o balão vai ser anexado ao body elemento.Estudo exemplo abaixo:

/* Each tip is set within this <ol>. */
/* This creates the order the tips are displayed */
<ol id="chooseID">
  /* data-id needs to be the same as the parent it will attach to */
  <li data-id="newHeader">Tip content...</li>

  /* This tip will be display as a modal */
  <li>Tip content...</li>

  /* using 'data-button' lets you have custom button text */
  <li data-class="parent-element-class" data-options="tipLocation:top;tipAnimation:fade" data-button="Second Button">Content...</li>

  /* you can put a class for custom styling */
  <li data-id="parentElementID" class="custom-class">Content...</li>
</ol>

Em seguida, você precisará adicionar um pouco de javascript magia começar a fazer com que tudo funcione:

/* Launching joyride when to page is loaded */

<script>
$(window).load(function() {
  $("#chooseID").joyride({
    /* Options will go here */
  });
});
</script>

Existem algumas opções que você pode definir, por favor, revise o link acima.