Tooltip on empty div

Good-day, is it possible to set a tooltip on an empty div? I am currently trying to do that with each of the pyramid areas on this homepage - https://abdju.com

This is the HTML I’m using (CSS below it)

<div class="homepage">
<div class="et_pb_gutters4 pyramid">
<div class="et_pb_row">
<div class="et_pb_row_fullwidth">
	
<div class="zone et_pb_column_4_4">
<a href="https://abdju.com/i-and-i/" title=“i and I” class="tooltip"></a>
</div>
	
<div class="zone et_pb_column_4_4">
<a href="https://abdju.com/blog/" title=“Blog” class="tooltip">
</a>
</div>
	
<div class="papyrus et_pb_column_4_4">
<a href="https://abdju.com/product-category/papyrus/" title=“Papyrus” class="tooltip">
</a>
</div>
	
<div class="soundvibes et_pb_column_4_4">
<a href="https://abdju.com/product-category/soundvibes/" title=“Soundvibes” class="tooltip"></a>
</div>
	
<div class="zone et_pb_column_4_4 clear">
<a href="https://abdju.com/product-category/sightup/" title=“Sightup” class="tooltip">
</a>
</div>
	
</div>
</div>
</div>
</div> <!-- #main-content -->

…and this is the CSS…

/* CSS Document
 * im inside Child  theme
 */

  .pyramid {
    max-width:100%;
    height: auto;
	background: black;
}
	  
.pyramid .et_pb_row {
	padding:0px;
}

body {
background:black;
color: white;
font-size:125%;
font-family:'Slabo 13px', serif;
display: flex;
align-items: flex-end;
height: 100%;
padding:0;
}

.zone {
  background-color: transparent;
  padding: 0 1em;
  /*filter: drop-shadow(0 1em 1em rgba(0, 0, 0, 0.1));*/
}

.zone:nth-child(1)  {
  background: #32174e url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode:luminosity; 
  transition: background-color 0.5s; 
 }

img { max-width:100%; height: auto;}

.zone:nth-child(1):hover {
  background-color: #8b56c2; 
}

.zone:nth-child(2) {
  background: #dd0000 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/blog-1024x200.png") top center no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: multiply;
  transition: background-color 0.01s; }

.zone:nth-child(2):hover {
  background-color: #fff8dc;
  background-blend-mode: luminosity;
  }

.papyrus {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-1024x200px.png") top right no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode: hard-light;
  transition: background-color 0.05s; }

.papyrus:hover, .soundvibes:hover {
  background-color: #b8860b;
}

.soundvibes {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-1024x200px.png") top left no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode:hard-light;
  transition: background-color 0.01s; }


.zone:nth-child(4) {
  background: #095309 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/sight-up-1024x200px.png") top left no-repeat;
  animation-fill-mode: forwards;
  background-blend-mode:darken;
  transition: background-color 0.05s; }

.zone:nth-child(4):hover {
    background-color: #228B22
 }

@media screen\0 {.soundvibes {float:left;}}
@media screen\9 {.soundvibes {float:left;}}

.soundvibes, x:-moz-any-link, x:default {float:left;}

/*Support for Clip-path CSS*/
@supports(-webkit-clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) or (clip-path: polygon(0 0, 100% 0, 100% 75%, 0 100%)) {

.pyramid {color: white;
font-size:125%;
font-family:'Slabo 13px', serif;
	}
	
.zone:nth-child(1) {
background: #32174e url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/i-and-I-250x165px.png") top center no-repeat;
-webkit-clip-path: polygon(50% 0, 62% 100%, 38% 100%);
clip-path: polygon(50% 0, 62% 100%, 38% 100%);
}

.zone:nth-child(2) {
  background: #dd0000 url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/blog-445x165.png") top center no-repeat;
  -webkit-clip-path: polygon(38% 0, 62% 0, 73.75% 100%, 26.5% 100%);
  clip-path: polygon(38% 0, 62% 0, 74% 100%, 26.25% 100%);
}

.papyrus {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/papyrus-500x165px.png") top right no-repeat;
  -webkit-clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 29% 100%);
  clip-path: polygon(52.5% 0, 100% 0, 100% 100%, 29% 100%);
}

.soundvibes {
  background: #f5c70f url("https://abdju.com/wp-content/themes/Divi-child/pyramid/images/soundvibes-320x165.png") top left no-repeat;
  -webkit-clip-path: polygon(0 0, 47.5% 0, 70% 100%, 0 100%);
  clip-path: polygon(0 0, 47.5% 0, 70% 100%, 0 100%);
}

.zone:nth-child(4) {
  -webkit-clip-path: polygon(12.5% 0, 87% 0, 100% 100%, 0 100%);
  clip-path: polygon(12.5% 0, 87% 0, 100% 100%, 0 100%);
}

/*.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}*/
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 50% !important
}

.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}
  
}


/* alex style fix 
.papyrus.et_pb_column_1_2 {
    margin-left: 4%;
}
.soundvibes.et_pb_column_1_2,
.papyrus.et_pb_column_1_2 {
    float: left;
    width: 46% !important
}*/

.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
}

 /* last 
.zone:nth-child(4n) {
    width: 95% !important;
    margin: 0 auto;
}*/

.homepage .et_pb_section {margin:0;
padding:0;}


/*media queries */

/*@media only screen and (max-width: 400px) {
  .pyramid {
    width: 400px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
	.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 70px;
	}
}

@media only screen and (min-width: 400px) and (max-width: 500px) {
  .pyramid {
    width: 300px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 90px;
	}
}


@media only screen and (min-width: 500px) and (max-width: 767px) {
  .pyramid {
    width: 500px;
    height: 575px;
    height: auto;
    margin: 0 auto;}
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 110px;
} 
}



@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .pyramid {
    width: 740px;
    height: 575px;
    height: auto;
    margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 130px;
}
}

@media only screen and (min-width: 1024px) and (max-width: 1200px) {
  .pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 150px;
}
}

@media only screen and (min-width: 1200px) {
.pyramid {
    width: 1024px;
    height: 575px;
    height: auto;
	margin: 0 auto; }
	
.papyrus.et_pb_column_1_2,
.soundvibes.et_pb_column_1_2,
.zone.et_pb_column_4_4 {
    height: 165px;
	}
}*/

/* Tooltip */
.tooltip{
display: inline;
position: relative;
}

.tooltip:hover:after{
background: #333;
background: rgba(0,0,0,.8);
border-radius: 5px;
bottom: 26px;
color: #fff;
content: attr(title);
left: 20%;
padding: 5px 15px;
position: absolute;
z-index: 98;
width: 220px;
}
		
.tooltip:hover:before{
border: solid;
border-color: #333 transparent;
border-width: 6px 6px 0 6px;
bottom: 20px;
content: "";
left: 50%;
position: absolute;
z-index: 99;
}

greenlink,

Please do not post inline HTML. Formally indented is easy to read. Inline flows off-screen to the right. Please.

fixed, apologies…

First, You still have the curly quote marks in the page, though most browsers are clever enough to put correct quote marks around the curly so they show in the tooltip. Maybe that is wanted, but then add the ascii quote marks so the browser doesn’t need to fix them, It doesn’t allways do it right.

Then, to show the tooltip on hover, there need to be a hover area. The link is empty and can not be hovered, but the parent can, so I suggest you move the :hover pseudo class to the parent div and let the parent’s hover give the .tooltip its pseudo elements to show the tooltip.

E.g.:

.zone:hover .tooltip:focus,
.zone:hover .tooltip:after,
.papyrus:hover .tooltip:focus,
.papyrus:hover .tooltip:after,
.soundvibes:hover  .tooltip:focus
.soundvibes:hover  .tooltip:after {

There are other ways too, but I think this will work the best. I added :focus as they are links to be used as the tooltip suggests, I guess.

1 Like

@greenink: you do realise, don’t you, that hover doesn’t work on touchscreen devices? It also fails for those navigating by keyboard, and while you can usually cater for them by adding :focus to your styles for links, as far as I know you can’t add :focus to a div, only links and inputs.

That’s right. But I think you can use tabindex on a div.

@greenink, I forgot to mention that :focus only could work if the div gets a tabindex attribute tabindex="0" (and the value is not negative, “0” makes it come in natural tab order).

@Erik_J Hmm…Okay I’d stripped it down to plain text before pasting it though so not sure why it’s doing that. Can you strip it down for me and repost here as code?

Done. It was 5 + 5 curly qoute marks.


<div class="homepage">
    <div class="et_pb_gutters4 pyramid">
        <div class="et_pb_row">
            <div class="et_pb_row_fullwidth">
                <div class="zone et_pb_column_4_4">
                    <a href="https://abdju.com/i-and-i/" title="i and I" class="tooltip"></a>
                </div>
                <div class="zone et_pb_column_4_4">
                    <a href="https://abdju.com/blog/" title="Blog" class="tooltip"></a>
                </div>
                <div class="papyrus et_pb_column_4_4">
                    <a href="https://abdju.com/product-category/papyrus/" title="Papyrus" class="tooltip"></a>
                </div>
                <div class="soundvibes et_pb_column_4_4">
                    <a href="https://abdju.com/product-category/soundvibes/" title="Soundvibes" class="tooltip"></a>
                </div>
                <div class="zone et_pb_column_4_4 clear">
                    <a href="https://abdju.com/product-category/sightup/" title="Sightup" class="tooltip"></a>
                </div>
            </div>
        </div>
    </div>
</div><!-- #main-content -->

Sorry, seems my mind were somewhere else!

This is more like what I meant to suggest:

.tooltip:focus:before,
.zone:hover .tooltip:before,
.papyrus:hover .tooltip:before,
.soundvibes:hover .tooltip:before {
    ...
}
.tooltip:focus:after,
.zone:hover .tooltip:after,
.papyrus:hover .tooltip:after,
.soundvibes:hover .tooltip:after {
    ...
}

<div tabindex="0" class="zone et_pb_column_4_4">

I’m sure I implemented this as intended, but some strange outcomes…see: https://abdju.com/

Hey everybody…thanks you for your responses. I asked the client if we could revert to using text to make the pyramid more accessible. @TechnoBear thank you for your advice. @Erik_J thank you for the assistance.

2 Likes

Good idea, may I suggest you enhance the accessibility by putting an outline on the focused links? E.g:

.pyramid a:focus {
    outline: 2px solid gold;
    outline-offset: 6px;
}

Great pyramid and matching body background!

<ot>

HA! For accessibility, I use that same technique and color on the site that I support

</ot>

<ot continues>
For better user experience, imho, Ideally I would liked to see the five pyramid shapes itselfs made of the link anchors, i.e. the divs becomes the links and the whole part will be clickable/enterable.

N.B. Mind I can’t forsee what implications the element change could bring.

Like:

<a class="soundvibes et_pb_column_1_2" href="/product-category/soundvibes/">Soundvibes</a>

And then I would give the links the gold color only to the link text on focus and maybe on hover too.

.pyramid a {
    display: block;
}
.pyramid a:focus,
.pyramid a:focus {
    color: gold !important;
}

</ot>

Good stuff…I tried it @Erik J, and it worked somewhat but more troubleshooting required - probably just minor css adjustments to reconcile the css for “a” elsewhere in the site…I’ve been on this for 3 months now…I’ll do it for Phase 2…the project is ongoing, but for now, will hand over as is. I’ve saved your notes in a code mockup though, so in a few weeks I’ll have another go at it.

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.