From 280cecb5bc4f97d5a23aea96f519070fd1669b9d Mon Sep 17 00:00:00 2001
From: = <=>
Date: Thu, 8 Aug 2019 14:53:58 -0300
Subject: [PATCH] Tooltip

---
 src/app/components/inicio/inicio.component.html | 87 +++++++++++++++++++++----
 src/app/components/inicio/inicio.component.scss | 15 ++++-
 src/app/components/inicio/inicio.component.ts   |  2 +
 src/assets/scss/bootstrap-override.scss         |  5 ++
 4 files changed, 96 insertions(+), 13 deletions(-)

diff --git a/src/app/components/inicio/inicio.component.html b/src/app/components/inicio/inicio.component.html
index 83f1cb8..6b6e7db 100644
--- a/src/app/components/inicio/inicio.component.html
+++ b/src/app/components/inicio/inicio.component.html
@@ -13,6 +13,79 @@
     <div class="row m-4 d-flex align-items-center disable-user-select">
       <div class="col-md-5 d-flex align-items-end flex-column">
 
+        <!-- TOOL TIp -->
+        <div class="popover left bs-example-popover p-4 border-0 shadow rounded mw-100 h-100 mb-auto" *ngIf="tooltip === true">
+          <div class="arrow"></div>
+          <h4 class="popover-title mb-3 mt-1"> Este producto forma parte de Combos y Promociones</h4>
+          <div class="popover-content mw-100 h-100 mb-auto">
+            <div class="d-flex  flex-column h-75 text-center">
+              <div class="overflow-auto overflow-scroll mb-2">
+
+                <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
+                    <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
+                        <div class="col-6 p-0 text-left my-auto">
+                            <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
+                            <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
+                        </div>
+                        <div class="col-6 p-1 text-center my-auto">
+                            <p class="m-0 h1 text-right">{{105 | currency}}</p>
+                        </div>
+                      </div>
+                </div>
+
+                <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
+                    <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
+                        <div class="col-6 p-0 text-left my-auto">
+                            <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
+                            <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
+                        </div>
+                        <div class="col-6 p-1 text-center my-auto">
+                            <p class="m-0 h1 text-right">{{105 | currency}}</p>
+                        </div>
+                      </div>
+                </div>
+
+                <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
+                    <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
+                        <div class="col-6 p-0 text-left my-auto">
+                            <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
+                            <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
+                        </div>
+                        <div class="col-6 p-1 text-center my-auto">
+                            <p class="m-0 h1 text-right">{{105 | currency}}</p>
+                        </div>
+                      </div>
+                </div>
+
+                <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
+                    <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
+                        <div class="col-6 p-0 text-left my-auto">
+                            <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
+                            <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
+                        </div>
+                        <div class="col-6 p-1 text-center my-auto">
+                            <p class="m-0 h1 text-right">{{105 | currency}}</p>
+                        </div>
+                      </div>
+                </div>
+
+                <div class="card bg-white rounded-sm shadow border-0 black-text my-3">
+                    <div class="card-body row m-0 p-0 px-1 p-2 shadow rounded">
+                        <div class="col-6 p-0 text-left my-auto">
+                            <p class="h4 text-left m-0"><strong>Promo 2 x 1</strong></p>
+                            <p class="m-0 h5"><small>2 Coca-cola 1.5 lt</small></p>
+                        </div>
+                        <div class="col-6 p-1 text-center my-auto">
+                            <p class="m-0 h1 text-right">{{105 | currency}}</p>
+                        </div>
+                      </div>
+                </div>
+
+              </div>
+            </div>
+          </div>
+        </div>
+        
         <!-- PROMOCIONES -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mb-auto">
           <div class="card-body text-left p-4">
@@ -38,16 +111,6 @@
             </div>
           </div>
         </div>
-        <!-- TOOL TIp -->
-        
-        <div class="popover left bs-example-popover">
-          <div class="arrow"></div>
-          <h3 class="popover-title">Popover left</h3>
-          <div class="popover-content">
-            <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
-          </div>
-        </div>
-      
 
         <!-- ORDENAR -->
         <div class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
@@ -79,7 +142,7 @@
             </div>
           </div>
         </div>
-        
+
         <!-- BUSCAR PRODUCTOS -->
         <div (click)="goPage('busqueda-productos')"
           class="card card-effect bg-white border-0 shadow rounded w-100 mt-4">
@@ -100,4 +163,4 @@
 
   <!-- SIDEBAR -->
   <app-sidebar class="col-3 col-md-2 vh-100 bg-dark text-white"></app-sidebar>
-</div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/inicio/inicio.component.scss b/src/app/components/inicio/inicio.component.scss
index 5e7ebb5..ce9eacb 100644
--- a/src/app/components/inicio/inicio.component.scss
+++ b/src/app/components/inicio/inicio.component.scss
@@ -2,7 +2,7 @@
   position: relative;
   display: block;
   float: left;
-  margin: 20px;
+  background-color: #2872ae;
 }
 
 .arrow {
@@ -12,4 +12,17 @@
   border-left-color: #999;
   border-left-color: rgba(0, 0, 0, 0.25);
   border-right-width: 0;
+  width: 0;
+  height: 0;
+  border-top: 20px solid transparent;
+  border-bottom: 20px solid transparent;
+  border-left: 20px solid #2872AE;
+  top: 50%;
+  right: -23px;
+  margin-top: -11px;
+
+}
+
+.black-text {
+  color: black;
 }
diff --git a/src/app/components/inicio/inicio.component.ts b/src/app/components/inicio/inicio.component.ts
index 1e01dcc..9ca5203 100644
--- a/src/app/components/inicio/inicio.component.ts
+++ b/src/app/components/inicio/inicio.component.ts
@@ -10,6 +10,8 @@ export class InicioComponent implements OnInit {
 
   constructor(private router: Router) { }
 
+  tooltip:boolean = false;
+
   ngOnInit() {
   }
 
diff --git a/src/assets/scss/bootstrap-override.scss b/src/assets/scss/bootstrap-override.scss
index f733ed1..0182d9f 100644
--- a/src/assets/scss/bootstrap-override.scss
+++ b/src/assets/scss/bootstrap-override.scss
@@ -6,4 +6,9 @@ $theme-colors: (
   light: white,
 );
 
+.popover{
+  background-color: #2872AE !important;
+  color: white !important;
+}
+
 @import "../../../node_modules/bootstrap/scss/bootstrap.scss";
-- 
1.9.1