From d816e67ce4040b2a9e06f6e0effc5c56aca568bb Mon Sep 17 00:00:00 2001
From: Miguel Medeiros <miguel@miguelmedeiros.com.br>
Date: Tue, 16 Nov 2021 18:03:43 -0300
Subject: [PATCH] fix: op_return tooltip position.

---
 .../cypress/integration/mainnet/mainnet.spec.ts  | 16 ++++++++++++++++
 .../transactions-list.component.html             |  4 ++--
 .../transactions-list.component.scss             |  6 ++++++
 3 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/frontend/cypress/integration/mainnet/mainnet.spec.ts b/frontend/cypress/integration/mainnet/mainnet.spec.ts
index d53c8bb6c..3e0e52248 100644
--- a/frontend/cypress/integration/mainnet/mainnet.spec.ts
+++ b/frontend/cypress/integration/mainnet/mainnet.spec.ts
@@ -63,6 +63,22 @@ describe('Mainnet', () => {
             cy.waitForSkeletonGone();
         });
 
+        it('check op_return tx tooltip', () => {
+            cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+            cy.waitForSkeletonGone();
+            cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('onmouseover');
+            cy.get('tbody > :nth-child(2) > :nth-child(1) > a').first().trigger('mouseenter');
+            cy.get('.tooltip-inner').should('be.visible');
+        });
+
+        it('check op_return coinbase tooltip', () => {
+            cy.visit('/block/00000000000000000003c5f542bed265319c6cf64238cf1f1bb9bca3ebf686d2');
+            cy.waitForSkeletonGone();
+            cy.get('div > a > .badge').first().trigger('onmouseover');
+            cy.get('div > a > .badge').first().trigger('mouseenter');
+            cy.get('.tooltip-inner').should('be.visible');
+        });
+
         describe('search', () => {
             it('allows searching for partial Bitcoin addresses', () => {
                 cy.visit('/');
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.html b/frontend/src/app/components/transactions-list/transactions-list.component.html
index fb9c5a7be..5df712023 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.html
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.html
@@ -41,7 +41,7 @@
                 </td>
                 <td>
                   <div [ngSwitch]="true">
-                    <ng-container *ngSwitchCase="vin.is_coinbase"><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid'">&nbsp;<span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template></a><br /><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></ng-container>
+                    <ng-container *ngSwitchCase="vin.is_coinbase"><span i18n="transactions-list.coinbase">Coinbase</span><ng-template [ngIf]="network !== 'liquid'">&nbsp;<span i18n="transactions-list.newly-generated-coins">(Newly Generated Coins)</span></ng-template><br /><a placement="bottom" [ngbTooltip]="vin.scriptsig | hex2ascii"><span class="badge badge-secondary scriptmessage longer">{{ vin.scriptsig | hex2ascii }}</span></a></ng-container>
                     <ng-container *ngSwitchCase="vin.is_pegin">
                       <span i18n="transactions-list.peg-in">Peg-in</span>
                     </ng-container>
@@ -146,7 +146,7 @@
                     </ng-template>
                     <ng-template #defaultscriptpubkey_type>
                       <ng-template [ngIf]="vout.scriptpubkey_type === 'op_return'" [ngIfElse]="otherPubkeyType">
-                        <a placement="bottom" [ngbTooltip]="vout.scriptpubkey_asm | hex2ascii">OP_RETURN</a>&nbsp;<span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span>
+                        OP_RETURN&nbsp;<a placement="bottom" [ngbTooltip]="vout.scriptpubkey_asm | hex2ascii"><span *ngIf="vout.scriptpubkey_asm !== 'OP_RETURN'" class="badge badge-secondary scriptmessage">{{ vout.scriptpubkey_asm | hex2ascii }}</span></a>
                       </ng-template>
                       <ng-template #otherPubkeyType>{{ vout.scriptpubkey_type | scriptpubkeyType }}</ng-template>
                     </ng-template>
diff --git a/frontend/src/app/components/transactions-list/transactions-list.component.scss b/frontend/src/app/components/transactions-list/transactions-list.component.scss
index 5a96d2d3c..48f2ff8e1 100644
--- a/frontend/src/app/components/transactions-list/transactions-list.component.scss
+++ b/frontend/src/app/components/transactions-list/transactions-list.component.scss
@@ -119,3 +119,9 @@
 h2 {
   line-height: 1;
 }
+
+.badge {
+  &:hover {
+    cursor: zoom-in;
+  }
+}