Biblioteca Javascript para agregar globos con mensajes que apunten a los controles de entrada requeridos

Question

Cuando se carga mi página web, se le debe solicitar al usuario que realice algunas selecciones en una secuencia.

Quiero que aparezcan globos de mensajes con mensajes como: "Oye, ya que seleccionaste tu país, ahora selecciona la provincia".Estos globos también deberían apuntar a ese control de selección en particular.

Tenga en cuenta que estos globos deberían aparecer en alguna llamada a un método que los active y no cuando se coloquen sobre ellos como si fueran información sobre herramientas.

Cualquier sugerencia es bienvenida

Answer 1

Eche un vistazo a este complemento: http://zurb.com/playground/jquery-joyride-feature-tour-plugin.

No estoy seguro de su estructura html, pero esto es lo que debe hacer.En su html, cada lugar donde desee que aparezca su 'globo' debe especificar una identificación de anclaje.

(Ejemplos tomados de la documentación oficial)

Por ejemplo, si quieres un 'globo' sobre el href, entonces:

/* 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>

Después de configurar las anclas, debes definir cómo debe verse tu globo.Para cada anchor id deberías especificar data-attribute con esa identificación, si no se especifica, el globo se adjuntará a body elemento.Ejemplo de estudio a continuación:

/* 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>

Luego necesitas agregar algo de inicio mágico de JavaScript para que todo funcione:

/* Launching joyride when to page is loaded */

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

Hay varias opciones que puede configurar; revise el enlace de arriba.