1. añadido tootlips, 2. creado un modal info y añadido al template general para…

1. añadido tootlips, 2. creado un modal info y añadido al template general para instrucciones de funcionamiento.

fuel/app/views/articulo/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-other">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/boletinsaludable/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-other">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/layout/template.twig

@@ -41,6 +41,9 @@
         {% endblock %}
     </div>
 
+    <!--modal instrucciones pantalla-->
+    {% include 'modals/modalinfo.twig' %}
+
 
     <!--includes js-->
     {% include 'includes/includes_after.twig' %}

fuel/app/views/listacompra/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-lista-compra">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/menupersonalizado/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-menu-personalizado">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/menussaludables/lista/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-menus-saludables">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/menussaludables/menu/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-menus-saludables">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/modals/modalinfo.twig

+
+<!-- Modal info template -->
+<div class="modal fade" id="modalInfo" tabindex="-1" role="dialog" aria-labelledby="modalInfo">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                <h4 class="modal-title" id="myModalLabel">Modal Info</h4>
+            </div>
+            <div class="modal-body">
+                ...
+            </div>
+
+        </div>
+    </div>
+</div>
\ No newline at end of file

fuel/app/views/perfil/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-perfil">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/receta/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-other">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

fuel/app/views/recetario/index.twig

@@ -5,11 +5,11 @@
     <div class="div-title bg-color-other">
         <div class="container">
             <div class="row">
-                <div class="col-xs-10">
+                <div class="col-xs-10 col-sm-11">
                     {{ title }}
                 </div>
-                <div class="col-xs-2 text-right">
-                    <i class="fa fa-info-circle"></i>
+                <div class="col-xs-2 col-sm-1 text-right" data-toggle="tooltip-info" data-placement="bottom" title="¿Como funciona?">
+                    <i class="fa fa-info-circle" data-toggle="modal" data-target="#modalInfo"></i>
                 </div>
             </div>
         </div>

public/assets/js/main.js

 
+
 /*----------------------------------------------------*/
 /*	Text imput effects
  /*----------------------------------------------------*/
@@ -47,3 +48,13 @@
     } );
 })();
 
+/*----------------------------------------------------*/
+/*	TOOLTIPS
+ /*----------------------------------------------------*/
+
+//
+$(function () {
+    $('[data-toggle="tooltip-info"]').tooltip()
+})
+
+