Inline Tooltip Text

Written by @kerixa 22 May 2020

Sometime there exist a word or phrase inline with other texts which needs more description. Adding extra information in the text maybe redundant and boring. The solution is to use tooltip boxes. Whenever they are hovered, more information is appeared. When mouse leaves, the box slides out!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:700,400);
*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

body {
  margin: 1em 2em;
  line-height: 1.5;
  background-color: #EAEAEA;
  color: #001331;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
}

p {
  max-width: 40em;
}

.tooltip {
  position: relative;
  display: inline-block;
  cursor: help;
  border-color: #001331;
  border-bottom: 1px dotted rgba(0, 19, 49, 0.9);
  background-color: #EAEADE;
  background-color: rgba(255, 255, 0, 0.05);
}
.tooltip:after {
  content: attr(data-tip);
  position: absolute;
  bottom: 24px;
  left: -10px;
  min-width: 100px;
  max-width: 300px;
  padding: 5px 7px 5px 10px;
  pointer-events: none;
  font-size: .75em;
  background-color: #001331;
  background-color: rgba(0, 19, 49, 0.9);
  color: #FFF;
  border-radius: 2px;
}
.tooltip:before {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  left: 5px;
  bottom: 18px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #001331;
  border-top: 6px solid rgba(0, 19, 49, 0.9);
}
.tooltip:before, .tooltip:after {
  display: block;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.2s ease-out, margin 0.2s ease-out;
}
.tooltip:hover {
  color: #999;
}
.tooltip:hover:before, .tooltip:hover:after {
  opacity: 1;
  margin-bottom: 3px;
  visibility: visible;
}

.tooltip-bottom:after {
  top: 24px;
}
.tooltip-bottom:before {
  top: 18px;
  border-top: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 6px solid #001331;
  border-bottom: 6px solid rgba(0, 19, 49, 0.9);
}
.tooltip-bottom:hover:before, .tooltip-bottom:hover:after {
  bottom: auto;
  margin-bottom: 0;
  margin-top: 3px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<p>
This is just some filler text, but
<span class="tooltip tooltip-bottom" data-tip="yay, tooltip content! provided by your friendly data-* attribute">this thing has a tooltip</span> and here we have more filler text. 
</p>
<p>
<span class="tooltip" data-tip="yay, bottom tooltip content! provided by your friendly data-* attribute">this thing has a tooltip</span> and here we have more filler text. Ut enim ad minim veniam, <span class="tooltip" data-tip="yay, bottom content! provided by your friendly data-* attribute">quis</span> nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300