[Support request] Customize Tooltip

[Valeriu]

Hi!

I posted now as a new topic. Here’s what I want to do. I want to take advantage of the tooltip
in order to secure EAT for the mighty Google. What I like to do is something like this:

My Tooltip Wish image

The problem is that the code on https://generatepress.com/forums/topic/tooltip-stylesheet/
it generates some errors on my end. I use this code:

/* Tooltip */
.tool-tip {
position: relative;
}
.tool-tip-wrap {
position: absolute;
top: 0;
left: -20px;
padding-top: 2em;
display: block;
width: 400px;
opacity: 0;
transition: opacity 0.1s ease-out;
}
.tool-tip-content {
display: block;
padding: 20px;
border: 1px solid #ddd;
background-color: #fff;
box-sizing: border-box;
color: #111;
}
.tool-tip:hover .tool-tip-wrap {
opacity: 1;
}
.tool-tip-wrap:after {
content: ”;
position: absolute;
display: block;
width: 0;
height: 0;
top: 1.6em;
left: 20px;
border-left: 8px solid transparent !important;
border-right: 8px solid transparent !important;
border-top: 0 !important;
border-bottom: 8px solid #ddd;
}

*************

Now, on my offline site, I have these errors (show in front of images):

FIRST ERROR

SECOND ERROR

For the sharing button, I use the Ultimate Social Media Icons PLUS plugin – free on WP.

One thing: my site is NOT online, I have it on my computer using Local for WP (https://localwp.com/).
From my experience, sometimes plugins and CSS enter in conflict on Local.

So I would be happy if you can confirm it works online. I use this code and implement it as a shortcode
on main posts: [sc name=”names”][/sc] (using Shotcoder plugin – https://wordpress.org/plugins/shortcoder/)

<p>Article by <a class="tool-tip" href="http://ABC.com/" title="">FIRST NAME<span class="tool-tip-wrap"><span class="tool-tip-content"><img src="http://abc.com/wp-content/uploads/2021/01/Screenshot-e1641393814995.jpg"><br>FIRST NAME<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></span></a> | Updated on [modified_date]<br/><i class="far fa-check-circle"></i> Fact checked by <a class="tool-tip" href="http://abc.com/" title="">SECOND NAME<span class="tool-tip-wrap"><span class="tool-tip-content"><img src="http://abc.com/wp-content/uploads/2021/01/Screenshot-2021-12-26-084936.jpg"><br>SECOND NAME<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</span></span></a></p>
<p>[DISPLAY_ULTIMATE_PLUS]</p>

And lastly, would be nice to customize as in my first image, but have no clue what to add – round image,
bold title, and social icons. But it’s not mandatory, can live without those.

Thanks!

[David]

Hi there,

try adding a high z-index property to the tool-tip-wrap element ie.

.tool-tip-wrap {
    z-index: 100000;
}

[Valeriu]

Yes, it’s working perfectly now! But… have an idea how to add links INSIDE the tooltip? If I do it
normally, it’s not working – link inside a link.

Article by <a class="tool-tip" href="http://ABC.com/" title="">FIRST NAME<span class="tool-tip-wrap"><span class="tool-tip-content"><img src="http://ABC.com/wp-content/uploads/2021/01/Screenshot-e1641393814995.jpg"><br>FIRST NAME<br>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. <a href="">Twitter</a> <a href="">Instagram</a> </span></span></a>

It looks like this

[David]

You cannot add a Link inside another Link – its not valid HTML and the browser will generally ‘kick the nested link out’.

See here for more info:

https://css-tricks.com/nested-links/

Question is – does the outer tool-tip element need to be a link ? It could just be another span if there is no link intention.

[Author]

Posts