Skip to content

Instantly share code, notes, and snippets.

@leegee
Last active June 15, 2020 10:33
Show Gist options
  • Save leegee/ac1240daaefe04961bf935212f1fcae0 to your computer and use it in GitHub Desktop.
Save leegee/ac1240daaefe04961bf935212f1fcae0 to your computer and use it in GitHub Desktop.
Show/hide tips
.tutorial-tip {
display: none;
background: var(--theme-toolip-bg);
color: var(--theme-link-toolip-fg);
font-size: 12pt;
padding: 1em;
position: absolute;
z-index: 2000;
width: auto;
min-width: 20em;
height: auto;
top: 2em;
left: 0;
box-shadow: var(--box-shadow);
}
.tutorial-tip.show {
display: block;
}
.tutorial-tip:before {
content: '';
font-size: 80%;
display: block;
width: 0;
height: 0;
left: 0;
top: -1em;
position: absolute;
border-left: 1em solid transparent;
border-right: 1em solid transparent;
border-bottom: 1em solid var(--theme-toolip-bg);
}
.tutorial-tip:after {
content: '×';
text-align: right;
right: 6px;
top: 0px;
position: absolute;
background: var(--theme-toolip-bg);
color: var(--theme-link-toolip-fg);
border-radius: 50%;
opacity: 0.4;
}
<div id="video-controls-show" title="Expand search reuslts">▾
<span class='tutorial-tip' id='expand-search-results'>Click this arrow to view links to all detected references to your search term</span>
</div>
Array.from(document.getElementsByClassName('tutorial-tip')).forEach(el => {
const tipElId = el.id;
if (!el.id) {
console.warn('No ID on tip element, ', el);
return;
}
const tipDbId = 'closed-tip-' + el.id;
const tipShown = Number(localStorage.getItem(tipDbId) || 0);
if (tipShown < 2) {
el.classList.add('show');
el.addEventListener('click', () => {
el.classList.remove('show');
localStorage.setItem(tipDbId, tipShown ? tipShown + 1 : 1);
});
}
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment