Skip to content

WCAG - Tooltips #4133

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

Open
milospp wants to merge 2 commits into
base: main
Choose a base branch
from
+153 −22
Open

WCAG - Tooltips #4133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ea7e36c
Indivudal profile, focus fix, tooltip improved
milospp Feb 10, 2026
968260b
coAuthor network tooltip hover fix
milospp Feb 10, 2026
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
24 changes: 24 additions & 0 deletions home/src/main/resources/rdf/i18n/en_US/interface-i18n/firsttime/vivo_UiLabel.ttl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -925,6 +925,22 @@ uil-data:qr_icon.VIVO
uil:hasKey "qr_icon" ;
uil:hasPackage "VIVO-languages" .

uil-data:uri_icon_label.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Open sharing options for this profile"@en-US ;
uil:hasApp "VIVO" ;
uil:hasKey "uri_icon_label" ;
uil:hasPackage "VIVO-languages" .

uil-data:qr_icon_label.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "Open individual URI QR code"@en-US ;
uil:hasApp "VIVO" ;
uil:hasKey "qr_icon_label" ;
uil:hasPackage "VIVO-languages" .

uil-data:label_type.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down Expand Up @@ -3076,6 +3092,14 @@ uil-data:research_areas.VIVO
uil:hasKey "research_areas" ;
uil:hasPackage "VIVO-languages" .

uil-data:research_areas_icon.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
rdfs:label "research areas icon"@en-US ;
uil:hasApp "VIVO" ;
uil:hasKey "research_areas_icon" ;
uil:hasPackage "VIVO-languages" .

uil-data:missing_grant.VIVO
rdf:type owl:NamedIndividual ;
rdf:type uil:UILabel ;
Expand Down
2 changes: 1 addition & 1 deletion .../src/main/webapp/templates/freemarker/body/partials/individual/individual-contactInfo.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<#assign addlEmail = propertyGroups.pullProperty("http://purl.obolibrary.org/obo/ARG_2000028","http://www.w3.org/2006/vcard/ns#Email")!>

<#if phone?has_content || primaryEmail?has_content || addlEmail?has_content >
<ul style="font-size:1em;padding-bottom:4px"><li><strong>${i18n().contact_info}</strong></li></ul>
<h2 style="font-size:1em;padding-bottom:4px"><strong>${i18n().contact_info}</strong></h2>
</#if>

<#-- Primary Email -->
Expand Down
8 changes: 6 additions & 2 deletions ...src/main/webapp/templates/freemarker/body/partials/individual/individual-iconControls.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,13 @@

<#-- Icon controls displayed in upper-right corner -->

<img id="uriIcon" title="${individual.uri}" src="${urls.images}/individual/share-uri-icon.png" alt="${i18n().share_the_uri}" />
<button id="uriIcon" class="nostyle" aria-label="${i18n().qr_icon_label}">
<img title="${individual.uri}" src="${urls.images}/individual/share-uri-icon.png" alt="${i18n().share_the_uri}" aria-hidden="true" />
</button>
<#if checkNamesResult?has_content >
<img id="qrIcon" src="${urls.images}/individual/qr-code-icon.png" alt="${i18n().qr_icon}" />
<button id="qrIcon" class="nostyle" aria-label="${i18n().uri_icon_label}">
<img src="${urls.images}/individual/qr-code-icon.png" alt="${i18n().qr_icon}" aria-hidden="true" />
</button>
<span id="qrCodeImage" class="hidden">${qrCodeLinkedImage!}
<a class="qrCloseLink" href="#" title="${i18n().qr_code}">${i18n().close_capitalized}</a>
</span>
Expand Down
2 changes: 1 addition & 1 deletion ...rc/main/webapp/templates/freemarker/body/partials/individual/individual-researchAreas.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<#assign localName = researchAreas.localName>
<h2 id="${localName}" class="mainPropGroup" title="${researchAreas.publicDescription!}">
${researchAreas.name}
<img id="researchAreaIcon" src="${urls.images}/individual/research-group-icon.png" alt="${i18n().research_areas}" />
<img id="researchAreaIcon" src="${urls.images}/individual/research-group-icon.png" alt="${i18n().research_areas_icon}" />
<@p.addLink researchAreas editable />
</h2>
<@p.verboseDisplay researchAreas />
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/main/webapp/templates/freemarker/body/partials/individual/individual-webpage.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<#assign webpage = propertyGroups.pullProperty("http://purl.obolibrary.org/obo/ARG_2000028","http://www.w3.org/2006/vcard/ns#URL")!>
<#if webpage?has_content> <#-- true when the property is in the list, even if not populated (when editing) -->
<#if !editable && individual.person() >
<ul style="font-size:0.9em;padding-bottom:4px"><li><strong>${i18n().websites}</strong></li></ul>
<h2 style="font-size:0.9em;padding-bottom:4px"><strong>${i18n().websites}</strong></h2>
</#if>
<@p.addLinkWithLabel webpage editable i18n().websites/>
<#assign localName = webpage.localName>
Expand Down
41 changes: 39 additions & 2 deletions .../src/main/webapp/templates/freemarker/visualization/personlevel/coAuthorPersonLevelD3.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,7 @@ function render_chord() {
// #9edae5

var svg = d3.select('#chord').append('svg')
.attr('role', 'presentation')
.attr('width', width+padding)
.attr('height', height+padding)
.append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
Expand Down Expand Up @@ -220,14 +221,50 @@ function render_chord() {
.on('click', chord_click())
.on("mouseover", chord_hover(.05))
.on("mouseout", chord_hover(.8));

// Hide on mouse away from info
d3.select('#chord-info-div')
.on('mouseout', function(event) {
var e = event || d3.event;
var div = this.getBoundingClientRect();
var x = (e.clientX !== undefined) ? e.clientX : (e.changedTouches ? e.changedTouches[0].clientX : 0);
var y = (e.clientY !== undefined) ? e.clientY : (e.changedTouches ? e.changedTouches[0].clientY : 0);

d3.select(this).style('display', 'none');
$('#chord').css('cursor', 'default');
});

$(document).on('keydown', function(e) {
if (e.key === "Escape" || e.key === "Esc" || e.keyCode === 27) {
$('#chord-info-div').hide();
}
});
}

function chord_hover(opacity) {
return function(g, i) {
if (opacity > .5) {
var chordInfoDiv = d3.select('#chord-info-div');
chordInfoDiv.style('display', 'none');
$('#chord').css('cursor', 'default');

var isHoveringTooltip = false;
if (chordInfoDiv && chordInfoDiv.node()) {
var rect = chordInfoDiv.node().getBoundingClientRect();
var mouseX = d3.event.clientX;
var mouseY = d3.event.clientY;
if (
mouseX >= rect.left - 40 &&
mouseX <= rect.right + 40 &&
mouseY >= rect.top - 40 &&
mouseY <= rect.bottom + 40
) {
isHoveringTooltip = true;
}
}
if (!isHoveringTooltip) {
chordInfoDiv.style('display', 'none');
$('#chord').css('cursor', 'default');
}

} else {
var hoverEvent = d3.event;
var topPos = hoverEvent.pageY - 60;
Expand Down
43 changes: 41 additions & 2 deletions webapp/src/main/webapp/templates/freemarker/visualization/personlevel/coPIPersonLevelD3.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,6 +139,7 @@ $(document).ready(function(){
// #9edae5

var svg = d3.select('#chord').append('svg')
.attr('role', 'presentation')
.attr('width', width+padding)
.attr('height', height+padding)
.append('g').attr('transform', 'translate(' + (width+padding) / 2 + ',' + (height+padding) / 2 +')')
Expand Down Expand Up @@ -199,13 +200,51 @@ $(document).ready(function(){
.on('click', chord_click())
.on("mouseover", chord_hover(.05))
.on("mouseout", chord_hover(.8));


// Hide on mouse away from info
d3.select('#chord-info-div')
.on('mouseout', function(event) {
var e = event || d3.event;
var div = this.getBoundingClientRect();
var x = (e.clientX !== undefined) ? e.clientX : (e.changedTouches ? e.changedTouches[0].clientX : 0);
var y = (e.clientY !== undefined) ? e.clientY : (e.changedTouches ? e.changedTouches[0].clientY : 0);

d3.select(this).style('display', 'none');
$('#chord').css('cursor', 'default');
});

$(document).on('keydown', function(e) {
if (e.key === "Escape" || e.key === "Esc" || e.keyCode === 27) {
$('#chord-info-div').hide();
}
});


function chord_hover(opacity) {
return function(g, i) {
if (opacity > .5) {
var chordInfoDiv = d3.select('#chord-info-div');
chordInfoDiv.style('display', 'none');
$('#chord').css('cursor', 'default');

var isHoveringTooltip = false;
if (chordInfoDiv && chordInfoDiv.node()) {
var rect = chordInfoDiv.node().getBoundingClientRect();
var mouseX = d3.event.clientX;
var mouseY = d3.event.clientY;
if (
mouseX >= rect.left - 40 &&
mouseX <= rect.right + 40 &&
mouseY >= rect.top - 40 &&
mouseY <= rect.bottom + 40
) {
isHoveringTooltip = true;
}
}
if (!isHoveringTooltip) {
chordInfoDiv.style('display', 'none');
$('#chord').css('cursor', 'default');
}

} else {
var hoverEvent = d3.event;
var topPos = hoverEvent.pageY - 60;
Expand Down
6 changes: 5 additions & 1 deletion webapp/src/main/webapp/themes/nemo/templates/individual--foaf-academic-article.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,11 @@

<#-- Most-specific types -->
<@p.mostSpecificTypes individual />
<span id="iconControlsVitro"><img id="uriIcon" title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon"/></span>
<span id="iconControlsVitro">
<button id="uriIcon" class="nostyle" aria-label="${i18n().qr_icon_label}">
<img title="${individual.uri}" class="middle" src="${urls.images}/individual/uriIcon.gif" alt="uri icon" aria-hidden="true" />
</button>
</span>
</h1>
</#if>
</header>
Expand Down
8 changes: 6 additions & 2 deletions webapp/src/main/webapp/themes/nemo/templates/individual--foaf-person.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,9 +98,13 @@ Add divs and wrapper to create funnelback basket controls. MUST BE REMOVED BEFOR
<!-- Contact Info -->
<div id="individual-tools-people">
<span id="iconControlsLeftSide">
<img id="uriIcon" title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}"/>
<button id="uriIcon" class="nostyle" aria-label="${i18n().qr_icon_label}">
<img title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}" aria-hidden="true" />
</button>
<#if checkNamesResult?has_content >
<img id="qrIcon" src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" />
<button id="qrIcon" class="nostyle" aria-label="${i18n().uri_icon_label}">
<img src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" aria-hidden="true" />
</button>
<span id="qrCodeImage" class="hidden">${qrCodeLinkedImage!}
<a class="qrCloseLink" href="#" title="${i18n().qr_code}">
${i18n().close_capitalized}
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/main/webapp/themes/nemo/templates/individual-custom-researchAreas.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
<#assign localName = researchAreas.localName>
<h3 id="${localName}" class="mainPropGroup h4" title="${researchAreas.publicDescription!}">
${researchAreas.name?capitalize}
<img id="researchAreaIcon" src="${urls.images}/individual/research-group-icon.png" alt="${i18n().research_areas}" />
<img id="researchAreaIcon" src="${urls.images}/individual/research-group-icon.png" alt="${i18n().research_areas_icon}" />
<@p.addLink researchAreas editable /> <@p.verboseDisplay researchAreas />
</h3>
<ul id="individual-${localName}" role="list" >
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/main/webapp/themes/nemo/templates/lib-properties.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@
<#local imageLabel><@addLinkWithLabel mainImage editable "${i18n().photo}" /></#local>
${imageLabel}
<#if showPlaceholder == "always" || (showPlaceholder="with_add_link" && imageLabel?has_content)>
<img class="img-rounded" src="${placeholderImageUrl(individual.uri)}" title = "${i18n().no_image}" alt="${i18n().placeholder_image}" width="${imageWidth!}" />
<img class="img-rounded" src="${placeholderImageUrl(individual.uri)}" title = "${i18n().no_image}" alt="" width="${imageWidth!}" />
</#if>
</#if>
</#macro>
Expand Down
2 changes: 1 addition & 1 deletion webapp/src/main/webapp/themes/nemo/templates/propStatement-organizationForPosition.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
</div>
<#else>
<div id="photo-wrapper">
<img width="190" title="no image" class="img-rounded" alt="placeholder image" src="/images/placeholders/person.thumbnail.jpg">
<img width="190" title="no image" class="img-rounded" alt="" src="/images/placeholders/person.thumbnail.jpg">
</div>
</#if>
</div>
Expand Down
8 changes: 6 additions & 2 deletions ...p/src/main/webapp/themes/tenderfoot/templates/body/individual/individual--foaf-person.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,13 @@
<div class="row title">
<div class="col-md-12">
<span id="iconControlsRightSide">
<img id="uriIcon" title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}"/>
<button id="uriIcon" class="nostyle" aria-label="${i18n().qr_icon_label}">
<img title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}" aria-hidden="true" />
</button>
<#if checkNamesResult?has_content >
<img id="qrIcon" src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" />
<button id="qrIcon" class="nostyle" aria-label="${i18n().uri_icon_label}">
<img src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" aria-hidden="true" />
</button>
<div id="qrCodeContainer">
<span id="qrCodeImage" class="bottomLeftAnchor hidden">${qrCodeLinkedImage!}
<a class="qrCloseLink" href="#" title="${i18n().qr_code}">${i18n().close_capitalized}</a>
Expand Down
9 changes: 7 additions & 2 deletions webapp/src/main/webapp/themes/tenderfoot/templates/body/individual/scratch.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,9 +17,14 @@
<!-- Contact Info -->
<div id="individual-tools-people">
<span id="iconControlsLeftSide">
<img id="uriIcon" title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}"/>
<button id="uriIcon" class="nostyle" aria-label="${i18n().qr_icon_label}">
<img title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}" aria-hidden="true"/>
</button>
<#if checkNamesResult?has_content >
<img id="qrIcon" src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" />

<button id="qrIcon" class="nostyle" aria-label="${i18n().uri_icon_label}">
<img src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" aria-hidden="true" />
</button
<span id="qrCodeImage" class="hidden">${qrCodeLinkedImage!}
<a class="qrCloseLink" href="#" title="${i18n().qr_code}">${i18n().close_capitalized}</a>
</span>
Expand Down
16 changes: 13 additions & 3 deletions webapp/src/main/webapp/themes/wilma/templates/individual--foaf-person.ftl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,11 +44,21 @@
<!-- Contact Info -->
<div id="individual-tools-people">
<span id="iconControlsLeftSide">
<img id="uriIcon" title="${individual.uri}" src="${urls.images}/individual/uriIcon.gif" alt="${i18n().uri_icon}"/>
<button id="uriIcon"
title="${individual.uri}"
class="nostyle"
aria-label="${i18n().uri_icon_label}">
<img src="${urls.images}/individual/uriIcon.gif"
alt="${i18n().uri_icon}"
aria-hidden="true"/>
</button>
<#if checkNamesResult?has_content >
<img id="qrIcon" src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" />
<button id="qrIcon" title="${individual.uri}" class="nostyle" aria-label="${i18n().qr_icon_label}">
<img src="${urls.images}/individual/qr_icon.png" alt="${i18n().qr_icon}" aria-hidden="true" />
</button>

<span id="qrCodeImage" class="hidden">${qrCodeLinkedImage!}
<a class="qrCloseLink" href="#" title="${i18n().qr_code}">${i18n().close_capitalized}</a>
<a class="qrCloseLink" href="#" title="${i18n().qr_code}" aria-hidden="true">${i18n().close_capitalized}</a>
</span>
</#if>
</span>
Expand Down
Loading