Tooltip with HTML Content Without JavaScript

Tooltip with HTML content without JavaScript

I have made a little example using css

.hover {  position: relative;  top: 50px;  left: 50px;}
.tooltip {  /* hide and position tooltip */  top: -10px;  background-color: black;  color: white;  border-radius: 5px;  opacity: 0;  position: absolute;  -webkit-transition: opacity 0.5s;  -moz-transition: opacity 0.5s;  -ms-transition: opacity 0.5s;  -o-transition: opacity 0.5s;  transition: opacity 0.5s;}
.hover:hover .tooltip {  /* display tooltip on hover */  opacity: 1;}

<div class="hover">hover  <div class="tooltip">asdadasd  </div></div>

Is a CSS-only Inline Tooltip With HTML Content Inside (eg. images) Possible?

If it is allowable to change the markup of the actual text to replace inline elements (p is tprobably the most likely to need this) with divs + suitable CSS, you can insert tooltip content within divs which are inline-block.

This means any block content can be held in the tooltip.

Here's a trivial example:

.inline {
  display:inline-block;
  position: relative;
}
.inline .content {
  display: none;
  position: absolute;
  top: 1em;
  left: 0;
  z-index: 99999;
  border-style: solid;
  background-color: white;
}
.inline:hover .content {
  display: block;
}

<div>I am not hoverable.
    <div class="inline">But I am hoverable.  
      <div class="content">I am tooltip content and I've got an image in me... 
        <img src="https://picsum.photos/200"/>
        <div>...and another div</div>
      </div>
    </div>I am not hoverable.
</div>

How to assign a tooltip to a div without javascript or JQuery?

Well, I can give you answer for you question from title.
I always use CSS3 pseudo elements and data atribute to accomplished that without any jQuery code.

This is CSS3:



    [data-tip] {
     position:relative
    }
    [data-tip]:before {
        content: '';
        display: none;
        border: 5px solid #000;
        border-top-color: #000;
        border-right-color: transparent;
        border-bottom-color: transparent;
        border-left-color: transparent;
        position: absolute;
        top: -7px;
        left: 10px;
        z-index: 8;
        font-size: 0;
        line-height: 0;
        width: 0;
        height: 0;
    }
    [data-tip]:after {
        display: none;
        content: attr(data-tip);
        position: absolute;
        top: -35px;
        left: 0px;
        padding: 0px 8px;
        background: #000;
        color: #fff;
        z-index: 9;
        font-size: 13px;
        height: 28px;
        line-height: 28px;
        white-space: nowrap;
        word-wrap: normal;
    }
    [data-tip]:hover:before, [data-tip]:hover:after {
        display: block;
    }
    .tip-below[data-tip]:after {
        top: 23px;
        left: 0px;
    }
    .tip-below[data-tip]:before {
        border-top-color: transparent;
        border-right-color: transparent;
        border-bottom-color: #1a1a1a;
        border-left-color: transparent;
        top: 13px;
        left: 10px;
    }

And HTML would b:

<a href="#" data-tip="Tooltip text here"> some text here </a>

Instead of bellow you can make to right side.

How to create a pure CSS tooltip with HTML content for inline elements

Note that W3C says :

Defining term: If the dfn element has a title attribute, then the exact value of that attribute is the term being defined.

Accordingly, you can have a simple solution where you put the term being defined inside the title attribute, and the definition inside

dfn::before {content: attr(title);padding: 0 0 1em;}      dfn button {display: none; position: absolute}dfn:hover button, dfn:focus button {display: block;}

<p>An     <dfn title="onomasticon" tabindex="0"><button disabled>       <p>Another word for <strong>thesaurus</strong></p>       <p><img src="http://i.imgur.com/G0bl4k7.png" /></p>      </button></dfn> is not a dinosaur.</p>

Tooltip on hover with inline CSS without ID

I removed all the inline event handlers you used in your HTML.

Check the JS comments for my explanation on the code.

const tooltipPadding = { top: 32, left: 16, }; // The extra em padding you set on the span converted to px 
const hide = element => element.style.visibility = 'hidden'; // Hide function

function show({ target }) { // Destrucutring the event obejct to get only the targetted element
  const element = target.nextElementSibling;
  const { left, top } = target.getBoundingClientRect(); // To get the position of the hovered a tag

  element.style.visibility = "visible";

  // To set the top and left position of the element
  element.style.left = `${left + tooltipPadding.left}px`;
  element.style.top = `${top + tooltipPadding.top}px`;
  target.addEventListener('mouseleave', _ => hide(element), { once: true }); // Adding an event to the a tag on mouseleave to hide the span only once.
}

// Select all the a tag and add the mouseenter event listener
[...document.querySelectorAll('a')].forEach(a => a.addEventListener('mouseenter', show));

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">Info 1</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 1:</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">Info 2</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 2</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">Info 3</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 3</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    
<a style="border-bottom: 1px dotted #000000; color: #000000; outline: none; cursor: help; text-decoration: none; position: relative;" href="#">(Info 4)</a>
<span style="visibility: hidden; color: #000000; cursor: help; padding: 0.8em 1em; background: #FFFFAA; border: 1px solid #FFAD33; -webkit-border-radius: 5px; -webkit-box-shadow: 5px 5px rgba(0, 0, 0, 0.1); position: absolute; left: 1em; top: 2em; z-index: 99; margin-left: 0; width: 250px;"><b>Some info 4</b><ul><li>test 1</li><li>test 2</li></ul></span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Adding a tool tip / bubble display without span tag or title

// Create tooltips dictionary
$tooltips = Array("Word1"=>"This word is word number 1", 
                  "Word2"=>"This word is word number 2");

$content = "Here are Word1 and Word2";
foreach ($tooltips as $word=>$tip){
    $content = preg_replace("/(".$word.")/", "<span title='".$tip."'>$1</span>", $content);
}
echo $content;

Add hover text without javascript like we hover on a user's reputation

Use the title attribute, for example:

<div title="them's hoverin' words">hover me</div>

Tooltip with HTML Content Without JavaScript