Skip to content

Instantly share code, notes, and snippets.

@kcak11

kcak11/App.md

Last active June 3, 2024 09:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kcak11/b272c0c28e33d7c7c9aba18c3cc3c6fb to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kcak11/b272c0c28e33d7c7c9aba18c3cc3c6fb to your computer and use it in GitHub Desktop.
Download ZIP
The Infotip
Raw
App.md

The Infotip

Raw
index.html
<div class="infoTipContainer">
<span class="infoText">Hover your mouse over this line to see the Infotip</span>
<div class="infoTipText">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
Raw
style.less
body {
font-family: Verdana;
.infoTipContainer {
position: relative;
.infoTipText {
position: absolute;
top: 30px;
left: 11px;
width: 300px;
background-color: #000;
color: #fff;
border-radius: 11px;
padding: 11px;
font-size: 11px;
box-shadow: 4px 4px 8px #000;
display: none;
&:before {
content: "";
width: 10px;
height: 10px;
transform: rotate(45deg);
background-color: #000;
position: absolute;
left: 44px;
top: -5px;
}
}
.infoText {
cursor: pointer;
&:hover {
color: #56aad4;
border-bottom: 1px dashed #56aad4;
& + .infoTipText {
display: block;
}
}
}
}
p {
font-size: 12px;
}
}
Raw
the-infotip.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment