Add tooltips to disabled elements

This commit is contained in:
Mark Veidemanis 2022-08-26 18:53:49 +01:00
parent 83d5f64db6
commit ab0fb195da
Signed by: m
GPG Key ID: 5ACFCEED46C0904F
2 changed files with 29 additions and 10 deletions

View File

@ -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>

View File

@ -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>