on-hover-show CSS component

public/css/style.css

@@ -1640,8 +1640,24 @@ button.note-templates-trigger-assessment {
     transform: translateY(-18px);
 }
 
-/* appt. confirmation history */
-.appointment-confirmation-history-trigger .appointment-confirmation-history {
+.on-hover-text-reveal {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.on-hover-text-reveal:hover {
+    white-space: normal;
+    overflow: unset;
+    text-overflow: unset;
+}
+.on-hover-show {
+    position: relative;
+}
+.on-hover-show:hover .on-hover-content {
+    opacity: 1;
+    pointer-events: all;
+}
+.on-hover-show .on-hover-content {
     position: absolute;
     width: 300px;
     right: 0;
@@ -1655,20 +1671,6 @@ button.note-templates-trigger-assessment {
     z-index: 2;
     top: 0;
 }
-.appointment-confirmation-history-trigger:hover .appointment-confirmation-history {
-    opacity: 1;
-    pointer-events: all;
-}
-.on-hover-text-reveal {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-.on-hover-text-reveal:hover {
-    white-space: normal;
-    overflow: unset;
-    text-overflow: unset;
-}
 .collapsible-tbody.collapsed {
     display: none;
 }

resources/views/app/dna/patients-table.blade.php

@@ -75,7 +75,7 @@
 					@if($patient->next_mcp_appointment_date)
 						<span class="text-muted">Next Appt. <b>{{ friendly_date_time($patient->next_mcp_appointment_date) }}</b></span>
 					@endif
-					<?= $recentNote = $patient->mostRecentCompletedMcpNote; ?>
+					<?php $recentNote = $patient->mostRecentCompletedMcpNote; ?>
 					@if($recentNote)
 					<div>
 						Note: <a href="/patients/view/{{ $patient->uid }}/notes/view/{{ $recentNote->uid }}" class="font-weight-bold">
@@ -86,41 +86,43 @@
 				</div>
 			</td>
 			<td>
-			   <div class="d-flex flex-column">
-			   		<span>Enrolled:
-					   @if($patient->is_enrolled_in_rm === 'YES')
-						<i class="fas fa-check-circle text-success" data-toggle="tooltip" data-placement="bottom" title="YES"></i>
-						@elseif($patient->is_enrolled_in_rm === 'NO')
-						<i 
-						class="fas fa-times-circle text-danger" 
-						tabindex="0"
-						data-toggle="popover"
-						title="No" 
-						data-target="#enrollment-{{ $patient->uid }}"
-						></i>
-						@elseif($patient->is_enrolled_in_rm === 'UNKNOWN')
-							<i 
-							tabindex="0"
-							data-toggle="popover"
-							title="Uknown" 
-   							data-target="#enrollment-{{ $patient->uid }}"
-							class="fas fa-question-circle text-secondary" 
-							popover
-							></i>
-						@endif   
-					</span>
-					<div id="enrollment-{{ $patient->uid }}" class="d-none">
-						<span>Is Eligible for RM: {{ $patient->is_eligible_for_rm }}</span><br>
-						<span>Why not eligible: {{ $patient->why_not_eligible_for_rm_category ?? '---' }}</span><br>
-						<span>{{ $patient->why_not_eligible_for_rm_memo }}</span>
-					</div>
+			   <div class="">
+				   <div class="on-hover-show d-inline-block">
+					   <span>Enrolled:
+						   @if($patient->is_enrolled_in_rm === 'YES')
+							   <i class="fas fa-check-circle text-success" data-toggle="tooltip" data-placement="bottom" title="YES"></i>
+						   @elseif($patient->is_enrolled_in_rm === 'NO')
+							   <i
+									   class="fas fa-times-circle text-danger"
+									   tabindex="0"
+									   data-toggle="popover"
+									   title="No"
+									   data-target="#enrollment-{{ $patient->uid }}"
+							   ></i>
+						   @elseif($patient->is_enrolled_in_rm === 'UNKNOWN')
+							   <i
+									   tabindex="0"
+									   data-toggle="popover"
+									   title="Uknown"
+									   data-target="#enrollment-{{ $patient->uid }}"
+									   class="fas fa-question-circle text-secondary"
+									   popover
+							   ></i>
+						   @endif
+						</span>
+					   	<div id="enrollment-{{ $patient->uid }}" class="on-hover-content">
+							<span>Is Eligible for RM: {{ $patient->is_eligible_for_rm }}</span><br>
+							<span>Why not eligible: {{ $patient->why_not_eligible_for_rm_category ?? '---' }}</span><br>
+							<span>{{ $patient->why_not_eligible_for_rm_memo }}</span>
+						</div>
+				   </div>
 				<?php $m = $patient->lastMeasurementOfType('Wt. (lbs.)');?>
 				@if($m)
-				<span>Wt. (lbs.) {{$m && $m->value ? round($m->value, 2) : '-'}}</span>
+				<span class="d-block mt-1">Wt. (lbs.) {{$m && $m->value ? round($m->value, 2) : '-'}}</span>
 				@endif
 				<?php $bp = $patient->lastMeasurementOfType('BP'); ?>
 				@if($bp)
-				<span>BP. {{$bp && $bp->value ? $bp->value : '-'}}</span>
+				<span class="d-block mt-1">BP. {{$bp && $bp->value ? $bp->value : '-'}}</span>
 				@endif
 			   </div>
 			</td>

resources/views/app/dna/patients.blade.php

@@ -20,43 +20,5 @@
     </div>
 </div>
 
-<script>
-	(function() {
-		function init() {
-			var patientsComponent = {
-                initTooltip: function(){
-                    $('[data-toggle="tooltip"]').tooltip({html:true});
-                },
-                initPopover: function () {
-                        var self = this;
-                        var popovers = $('[popover]');
-                        popovers.each(function () {
-                            var element = $(this);
-                            console.log({element});
-                            var target = element.data('target');
-                            $(this).blur();
-                            $(this).popover({
-                                html: true,
-                                trigger: 'focus',
-                                placement: 'top',
-                                sanitize: false,
-                                content: function () {
-                                    var content = $(target).html();
-                                    console.log({content, target});
-                                    return content;
-                                }
-                            });
-                        });
-                    },
-                init: function(){
-                    this.initTooltip();
-                    this.initPopover();
-                }
-            };
-            patientsComponent.init();
-		}
-		addMCInitializer('patients-list', init, '#patients-list');
-	})();
-</script>
 @endsection
 

resources/views/app/patient/partials/appointment-confirmation.blade.php

@@ -54,10 +54,10 @@
         @endif
     </div>
     @if($appointment->latest_confirmation_request_at || $appointment->latest_confirmation_decision_at)
-        <div class="ml-4 px-2 c-pointer position-relative appointment-confirmation-history-trigger"
+        <div class="ml-4 px-2 c-pointer position-relative appointment-confirmation-history-trigger on-hover-show"
              data-uid="{{$appointment->uid}}">
             <i class="fa fa-history text-secondary"></i>
-            <div class="appointment-confirmation-history">
+            <div class="appointment-confirmation-history on-hover-content">
 
             </div>
         </div>

resources/views/layouts/template.blade.php

@@ -44,10 +44,9 @@
     <link href="{{asset('/css/z.css')}}?v={{config('app.asset_version')}}" rel=stylesheet>
     <!-- Styles -->
 
-    
+    <script src="{{ asset('js/app.js') }}?v={{config('app.asset_version')}}" type="application/javascript"></script>
     <script src="/js/jquery-3.5.1.min.js"></script>
     <script src="/js/jquery.form.min.js"></script>
-    <script src="{{ asset('js/app.js') }}?v={{config('app.asset_version')}}" type="application/javascript"></script>
     <script src="{{ asset('js/toastr.min.js') }}" type="application/javascript"></script>
     <script src="/js/yemi.js?v={{config('app.asset_version')}}" type="application/javascript"></script>