Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace qtip JS library by a pure CSS tooltip #1324

Merged
merged 17 commits into from
Sep 27, 2022
+267 −139
Merged

Replace qtip JS library by a pure CSS tooltip #1324

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
5fc2219
Replace qtip JS library by a pure CSS tooltip
kinow May 29, 2022
79b8147
Remove qtip from templates/views.
kinow Sep 8, 2022
8354999
Remove CSS animations from the CSS file (commented, can be modified l…
kinow Sep 8, 2022
a4b62d6
Adjust z-index of the tooltips. The clear-search icon has z-index 900…
kinow Sep 10, 2022
511b36e
property-click tooltip
kinow Sep 10, 2022
461c662
Hierarchy trigger tooltip
kinow Sep 10, 2022
180aff0
Rename initHierarchyQtip (to ease updating the others)
kinow Sep 10, 2022
e90ece9
Remove jquery qtip CSS style
kinow Sep 10, 2022
4f00c4f
redirected-vocab-id
kinow Sep 10, 2022
dd59e5b
Reified properties tooltip (pending tests)
kinow Sep 11, 2022
bb79a6e
Use pre-line for the data-title value, so that it collapses sequences…
kinow Sep 17, 2022
81e0689
Override z-index for focus of tooltips in styles.css
kinow Sep 17, 2022
d0ad616
Fix missing space between css classes, now versal property classes ar…
kinow Sep 17, 2022
e9cdaf7
We do not want upper case inherited in the tooltip component
kinow Sep 24, 2022
cfddb68
Make t-top triangle/arrow visible
kinow Sep 24, 2022
6d7861d
Tweak tooltip for reified and skos-xl properties
kinow Sep 24, 2022
9c70cdd
further tweaks to skos-xl and reified definition tooltips (e.g. prope…
osma Sep 27, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,7 @@
"monolog/monolog": "1.23.*",
"newerton/jquery-mousewheel": "dev-master",
"pamelafox/lscache": "1.0.5",
"malihu/malihu-custom-scrollbar-plugin": "3.1.5",
kinow marked this conversation as resolved.
Show resolved Hide resolved
"grimmlink/qtip2": "3.0.3"
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Since this is a CSS only solution, we are only removing a JS dependency from composer.json.

"malihu/malihu-custom-scrollbar-plugin": "3.1.5"
kinow marked this conversation as resolved.
Show resolved Hide resolved
},
"require-dev": {
"phpunit/phpunit": "9.5.*",
Expand Down
2 changes: 0 additions & 2 deletions resource/css/jquery.qtip.min.css
View file
Open in desktop

This file was deleted.

260 changes: 220 additions & 40 deletions resource/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,9 +103,6 @@ h1, .prefLabel, .prefLabelLang, .notation {
font-size: 16px;
}

.multiselect span, .multiselect a, .dropdown-toggle, #search-all-button, .qtip-skosmos * {
}

.topbar a.navigation-font, .topbar span {
color: var(--dark-color);
}
Expand Down Expand Up @@ -855,31 +852,10 @@ ul.dropdown-menu > li:last-child > input {
width: 50px;
}

.qtip-skosmos {
background-color: var(--tooltip-bg-color);
border-radius: 0;
border: 3px solid var(--tooltip-border-color);
margin-top: 12px;
margin-left: 9px;
min-width: 400px;
}

.qtip-skosmos *, .reified-tooltip > p > span {
color: var(--white-color);
font-size: var(--font-size);
font-weight: 400;
}

.qtip-skosmos a {
color: var(--tooltip-text-color) !important;
width: 100%;
}

.reified-tooltip {
display: none;
margin-top: 5px;
width: 100%;

}

.reified-property-value > img {
Expand Down Expand Up @@ -2270,14 +2246,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
display: none;
}

.qtip-skosmos:not(#qtip-0) {
left: 0 !important;
}

.qtip-skosmos:not(#qtip-0) canvas {
display: none !important;
}

.content {
margin: 0 auto;
}
Expand Down Expand Up @@ -2324,14 +2292,6 @@ body, .versal, h1, h2, h3, p, .versal-bold {
margin-left: 10px;
margin-top: 20px;
}

.qtip-skosmos {
min-width: auto;
left: 0 !important;
}
.qtip-skosmos canvas {
display: none !important;
}
osma marked this conversation as resolved.
Show resolved Hide resolved
}

@media (max-width: 530px) {
Expand Down Expand Up @@ -2758,3 +2718,223 @@ body, .versal, h1, h2, h3, p, .versal-bold {
border: 2px dashed #62729f !important;
}
<![endif]-->

/*
* Skosmos tooltips.
*
* Created to replace https://github.com/qTip2/qTip2/ as that library is not maintained anymore,
* and creates issues when trying to update JQuery versions.
*
* The .skosmos-tooltip{-wrapper} classes are derived from https://dev.to/r3zu3/pure-css-tooltip-1k3j.
*
* The .skosmos-tooltip-html* classes are from https://codepen.io/roydigerhund/pen/gPyzEa/.
*/
.skosmos-tooltip-wrapper {
width: fit-content;
}

.skosmos-tooltip {
position: relative;
}

.skosmos-tooltip a {
color: var(--tooltip-text-color) !important;
width: 100%;
}

.skosmos-tooltip::before {
position: absolute;
content: ' ';
background-color: var(--tooltip-border-color);
border: 3px solid var(--tooltip-border-color);
width: 15px;
height: 15px;
z-index: 500;
opacity: 0;
/* transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; */
pointer-events: none;
}

.skosmos-tooltip::after {
content: attr(data-title);
/* https://www.digitalocean.com/community/tutorials/css-line-break-content-property */
white-space: pre-line;
max-width: 400px;
width: max-content;
display: inline-block;
border-radius: 0;
font-size: var(--font-size);
font-weight: 400;
color: var(--white-color);
background-color: var(--tooltip-bg-color);
border: 3px solid var(--tooltip-border-color);
position: absolute;
z-index: 9002;
opacity: 0;
/* transition: all cubic-bezier(0.17, 0.67, 0.5, 0.71) 100ms; */
pointer-events: none;
margin: 12px 0 0 9px;
padding: 0.25rem 0.5rem;
text-transform: none;
}

.skosmos-tooltip:focus {
z-index: 9002 !important;
}

.skosmos-tooltip:hover::before, .skosmos-tooltip:hover::after {
opacity: 1;
}

.skosmos-tooltip.t-top::before {
top: 0;
left: 50%;
transform: translate(0, 0) rotate(45deg);
}

.skosmos-tooltip.t-top::after {
top: 0;
left: 0;
transform: translate(0, 0);
}

.skosmos-tooltip.t-top:hover::before {
transform: translate(0, calc(-50% - 5px)) rotate(45deg);
}

.skosmos-tooltip.t-top:hover::after {
transform: translate(0, calc(-100% - 15px));
}

.skosmos-tooltip.t-left::before {
top: 25%;
left: 0;
transform: translate(0, 0%) rotate(45deg);
}

.skosmos-tooltip.t-left::after {
top: 0;
left: 0;
}

.skosmos-tooltip.t-left:hover::before {
transform: translate(calc(-100% - 5px)) rotate(45deg);
}

.skosmos-tooltip.t-left:hover::after {
transform: translate(calc(-100% - 10px));
}

.skosmos-tooltip.t-right::before {
top: 25%;
right: 0;
transform: translate(0, 0%) rotate(45deg);
}

.skosmos-tooltip.t-right::after {
top: 0;
right: 0;
}

.skosmos-tooltip.t-right:hover::before {
transform: translate(calc(100% + 5px)) rotate(45deg);
}

.skosmos-tooltip.t-right:hover::after {
transform: translate(calc(100% + 10px));
}

.skosmos-tooltip.t-bottom::before {
bottom: 0;
left: 50%;
transform: translate(-50%, 0) rotate(45deg);
}

.skosmos-tooltip.t-bottom::after {
bottom: 0;
left: 50%;
transform: translate(-50%, 0);
}

.skosmos-tooltip.t-bottom:hover::before {
transform: translate(-50%, calc(100% + 5px)) rotate(45deg);
}

.skosmos-tooltip.t-bottom:hover::after {
transform: translate(-50%, calc(100% + 10px));
}

/* These classes were needed for the reified properties tooltips, as they displayed HTML elements.*/
/*
* Example use case:
*
* <div class="tooltip-html">
* <input type="button" value="Hover Me">
* <div class="tooltip-html-content">
* <p>First line</p>
* <p>Second <a href="#">line</a></p>
* </div>
* </div>
*/
/* NOTE: We only display this tooltip at the bottom of the element that triggered it, as the qtip
* as its settings for the reified properties were doing so.
*/
.tooltip-html {
position: relative;
display: inline-block;
cursor: pointer;
}

.tooltip-html:hover .tooltip-html-content, .tooltip-html:focus .tooltip-html-content {
visibility: visible;
opacity: 1;
}

.tooltip-html-content {
box-sizing: border-box;
position: absolute;
top: 20px;
left: 0;
display: block;
cursor: text;
width: 350px;
color: var(--white-color);
background-color: var(--tooltip-bg-color);
border: 3px solid var(--tooltip-border-color);
z-index: 9001;
visibility: hidden;
opacity: 0;
padding: 0.25rem 0.5rem;
}

.tooltip-html-content:focus {
z-index: 9001 !important;
}

.tooltip-html-content * {
color: var(--white-color);
}

.tooltip-prop {
font-weight: 500;
}

/*
* The triangle that appears near the element that triggered it.
*/
.tooltip-html-content:after {
position: absolute;
content: '';
width: 10px;
height: 10px;
transform: rotate(45deg);
top: -8px;
left: 0;
margin-left: 2px;
color: var(--white-color);
border-top: 6px solid var(--tooltip-border-color);
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
border-left: 6px solid var(--tooltip-border-color);
z-index: 9002;
}
Loading