Skip to content

Commit

Permalink
#55 Add tooltips for site actions
Browse files Browse the repository at this point in the history
  • Loading branch information
@waseemsadiq
waseemsadiq committed May 24, 2022
1 parent b6007ec commit 6ac1272
Show file tree
Hide file tree
Showing 4 changed files with 58 additions and 5 deletions.
21 changes: 18 additions & 3 deletions sites/dashboard/pages/index.html.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,36 @@
</td>
<td class="py-3 px-6 text-center">
<div class="flex item-center justify-center">
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer">
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">View site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer">
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">Edit site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer">
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">Delete site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M9 19l3 3m0 0l3-3m-3 3V10" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">Download remote site</span>
</div>
<div class="w-4 mr-2 transform hover:text-purple-500 hover:scale-110 cursor-pointer cursor-pointer has-tooltip">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
</svg>
<span class="tooltip rounded shadow-lg p-1 bg-gray-800 text-white -mt-12">Deploy to remote server</span>
</div>
</div>
</td>
Expand Down
10 changes: 10 additions & 0 deletions sites/dashboard/theme/css/input.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,6 +134,16 @@
scroll-behavior: auto;
}
}
/* tooltips */
.tooltip {
@apply invisible absolute;
}

.has-tooltip:hover .tooltip {
@apply visible z-50;
width: 180px;
right: -90px;
}
}

@layer components {
Expand Down
Loading

0 comments on commit 6ac1272

Please sign in to comment.