Add tooltips to disabled elements

2 years ago · ab0fb195da
parent 83d5f64db6
commit ab0fb195da
2 changed files with 29 additions and 10 deletions
--- a/core/templates/base.html
+++ b/core/templates/base.html
@ -95,12 +95,20 @@
        border-bottom: 3px solid grey;
      }

-      /* @media screen and (min-width: 500px) {
-        .datetimepicker-wrapper {
-          position: absolute;
-          z-index: 100;
-        }
-      } */
+      .tooltiptext {
+        visibility: hidden;
+        background-color: black;
+        color: #fff;
+        text-align: center;
+        padding: 5px 0;
+        border-radius: 6px;
+        position: absolute;
+        z-index: 1;
+      }
+
+      .rounded-tooltip:hover .tooltiptext {
+        visibility: visible;
+      }
    </style>
  </head>
  <body>
--- a/core/templates/ui/drilldown/drilldown.html
+++ b/core/templates/ui/drilldown/drilldown.html
@ -136,16 +136,23 @@
              </p>
            </div>
            <div class="control">
-              <div class="field">
+              <div class="field rounded-tooltip">
                <input
                  id="full_query"
                  type="checkbox"
                  class="switch is-rounded is-info"
                  {% if params.query_full is not None %}checked="checked"{% else %}none{% endif %}
-                  {% if not perms.core.query_search %}disabled{% endif %}
+                  {% if not perms.core.query_search %}
+                    disabled
+                  {% endif %}
                  data-script="on click toggle .is-hidden on #query_full">
                <label
-                  for="full_query">Full query </label>
+                  for="full_query">
+                  Full query
+                </label>
+                {% if not perms.core.query_search %}
+                  <span class="tooltiptext tag is-danger is-light">No access</span>
+                {% endif %}
              </div>
            </div>
          </div>
@ -295,6 +302,7 @@
                  </span>
                </label>
              </div>
+
            </div>
            <div class="control">
              <div class="field">
@ -379,7 +387,7 @@
              </div>
            </div>
          </div>
-          <div class="column is-narrow">
+          <div class="column is-narrow rounded-tooltip">
            <div class="field has-addons">
              <div class="control has-icons-left">
                <span class="select is-warning">
@ -416,6 +424,9 @@
                </a>
              </p>
            </div>
+            {% if not user.is_superuser %}
+              <span class="tooltiptext tag is-danger is-light">No access</span>
+            {% endif %}
          </div>
        </div>
      </div>