Last active
June 23, 2022 10:30
-
-
Save rich-nahra/660b60671051f9c10f7d07ce8e39e595 to your computer and use it in GitHub Desktop.
display's service title under mouse pointer.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // ==UserScript== | |
| // @name aws-console-tip | |
| // @namespace http://tampermonkey.net/ | |
| // @version 0.1 | |
| // @description Are you using service icon only in console display settings? This will help by displaying service title under mouse pointer. | |
| // @author Rich Nahra | |
| // @match https://*.console.aws.amazon.com/* | |
| // @match https://console.aws.amazon.com/* | |
| // @icon https://www.google.com/s2/favicons?sz=64&domain=amazon.com | |
| // @grant none | |
| // ==/UserScript== | |
| (function () { | |
| const over_icon = ` | |
| display: block; | |
| width: 16px; | |
| height: 16px; | |
| transform: scale(2); | |
| ` | |
| const over_tip_div = (s, h=0, p=0) => { | |
| return `${s} width: 100%; background-color: #232f3e; | |
| padding: ${p}px; z-index: 1000; position: fixed; | |
| top: 70px; height: ${h}px; | |
| box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.3); | |
| ` | |
| } | |
| const textsp = () => { | |
| return ` | |
| position: fixed; width: 300px; color: white; left: ${event.clientX + 2 }px; | |
| font-family: "Amazon Ember", "Helvetica Neue", Roboto, Arial, sans-serif; font-size: 14px;` | |
| }; | |
| const out_icon = ` | |
| display: inline-block; | |
| width: 16px; height: 16px; | |
| -webkit-transition-property: all; -webkit-transition-duration: 0.3s; -webkit-transition-timing-function: ease; | |
| ` | |
| setTimeout(() => { | |
| let tips = document.createElement('div'); | |
| tips.setAttribute("class", "globalNav"); | |
| tips.id = "aws-console-tips"; | |
| let tt = document.createElement('span'); | |
| tt.id = "aws-console-tips-text"; | |
| tips.append(tt); | |
| document.body.append(tips); | |
| let icons = document.getElementById('awsc-navigation-container').querySelectorAll("a[role='button']"); | |
| icons.forEach(icon => { | |
| icon.addEventListener("mouseover", function () { | |
| icon.getElementsByTagName("div")[0].setAttribute('style', over_icon); | |
| tips.setAttribute("style", over_tip_div('transition:height .2s ease;', 16, 10)); | |
| tt.setAttribute("style", textsp()); | |
| tt.innerHTML = icon.title; | |
| }); | |
| icon.addEventListener("mouseout", function () { | |
| icon.getElementsByTagName("div")[0].setAttribute('style', out_icon); | |
| tips.setAttribute("style", over_tip_div('transition:height .5s ease;', 1, 0)); | |
| tt.innerHTML = ""; | |
| }); | |
| }); | |
| }, "1500") | |
| })(); |
Author
rich-nahra
commented
Jun 23, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment