CODEWITHSUNDEEP
javascriptjqueryhtmlcsstooltip
Tony TCG
Tony TCG

Reputation: 323

How To Easily Insert Tooltips in HTML?

Does anyone know how to insert a tooltip for a phrase in HTML as you write without too much of code?

The idea is that it shouldn't be a huge block of code, but relatively short, and easily insertable.

An imaginary example: <p> This is a <tooltip-data="A yellow fruit"> bananna </tooltip> </p>

The purpose is for when you are writing an article, to add a tooltip explaining what a word or phrase means, but without requiring much effort, or taking too much space on the code.

One alternative I found is this, but it's a huge block of code and it takes a lot of space, also I do not know how to apply this to several phrases, it seems like you need to add a div for every tooltip you want to show.

And I already do know about <a href="#" title="A yellow fruit"> Bannana </a> but it doesn't allow for styles, and does not show up on phones.

Upvotes: 0

Views: 481

Answers (3)

Nooh
Nooh

Reputation: 1546

Please try this.

.tooltip {
  position: relative;
  cursor: pointer;
}

.tooltip:after {
  position: absolute;
  background: rgba(140,180,140,.5);
  content: attr(data-tooltip);    
  bottom: 100%;
  left: 0;
  max-width: 200px;
  opacity: 0;
  transition: all ease .3s;
  padding: 5px;
  border-radius: 7px;
}

.tooltip:hover:after {  
  opacity: 1;
}
<h1>Tooltip Example</h1>
<div class="tooltip" data-tooltip="My tips">
  Hover over me
<div>

Upvotes: 0

ca1c
ca1c

Reputation: 1285

Take a look at this.

<html>
<style>
  .tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
  }
  .tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 1s;
  }
  .tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
  }
  .tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }
</style>

<body style="text-align:center;">

  <h2>Tooltip</h2>
  <p>Move the mouse over the text below:</p>

  <div class="tooltip">Hover over me
    <span class="tooltiptext">Tooltip text</span>
  </div>
  <br/>
  <br/>
  <div class="tooltip">Hover over me2
    <span class="tooltiptext">Tooltip text again</span>
  </div>
  <br/>
  <br/>
   <div class="tooltip">Hover over me3
        <p class="tooltiptext">Tooltip text</p>
   </div>
   <br/>
   <br/>
    <div class="tooltip">Hover over me
        <h1 class="tooltiptext">Tooltip text</h1>
      </div>
   <br/>
   <br/>
   <div class="tooltip">Hover over me
        <h2 class="tooltiptext">Tooltip text</h2>
      </div>
</body>

</html>

This is courtesy of W3schools. Just note that all of the css in there is not necessary, you just need some to make the tooltip actually work

Upvotes: 2

M. Twarog
M. Twarog

Reputation: 2623

What you need is library based on Angular-like directives. Every aspect of tooltip may be described directly in html in place of usage. Take a look at: https://angular-ui.github.io/bootstrap/#/popover

Example of usage:

<button uib-popover="I appeared on mouse enter!" 
popover-trigger="'mouseenter'" type="button">Mouseenter</button>

Upvotes: 0

Related Questions