search

sgbaird / faith-family-science

Repository hosting the content for my views and journey as a member of the Church of Jesus Christ of Latter-day Saints, a husband and father, and a scientist.
https://sgbaird.github.io/faith-family-science/
3 stars 0 forks source link

incorporate tooltips #1

Open sgbaird opened 2 years ago

sgbaird commented 2 years ago

usage:

<div class="tooltip">Example tooltip
  <span class="tooltiptext">Tooltip text</span>
</div>

style (placed at bottom of .md file):

<style>
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 150%;
  left: 50%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
sgbaird commented 2 years ago

<span> tag seems to be more compatible with hyperlinks directly after

<span class="tooltip" markdown="1"> until just before midnight
  <span class="tooltiptext">I don't work on Sundays as part of my
personal efforts to keep the Sabbath day holy.</span>
</span><sup>[1][sabbath-day]</sup>