[Resolved] Pure CSS tooltip

[Author]

Posts

[Akhil]

Hi nigel.,

i am trying to implement a simple pure css tooltips to display the operating hours.

this is my simple code.

op hours

, but it doesn't output anything, am i doing anything wrong here?

when i try simple code without toolset field it works fine.

Thanks

[Nigel]

What solution are you using for tooltips?

There is no built-in solution with WordPress, but if you are using Bootstrap you can add them as described here: hidden link

But if you are adding a tooltip attribute directly to a link it sounds like you are using something else.

[Akhil]

i am using pure css tooltips but yes let me try the bootstrap method. thanks

[Akhil]

Hi , pls test this code, it doesnt accept html as title?

.

the issue is the <br> ?

[Nigel]

The documentation says that you need to specify the html option as true if you want to be able to use html within the title that is used for the tooltip content: hidden link

[Akhil]

Hi Nigel, this look way too complicated than i imagine.

if i need to enter some conditional code to output the tooltip title , do i need to create a separate view for this ?

currently i am using this pure css approach but its not accepting the conditional codes.
https://stackoverflow.com/questions/40531029/how-to-create-a-pure-css-tooltip-with-html-content-for-inline-elements

[Nigel]

Hi Dee

I looked at the solution in that stackoverflow article and effectively copied and pasted it into my WordPress site and it worked, so then I modified it a little to use a types shortcode to output a thumbnail of an image field for the tooltip content, and that worked okay.

I ended up with this:

<p>An <dfn title="onomasticon"><button disabled class="dfn-tooltip"><p>[types field='logo' title='%%TITLE%%' alt='%%ALT%%' size='thumbnail' resize='proportional'][/types]</p></button></dfn> is not a dinosaur.</p>

and I used the CSS from the SO answer:

dfn {
  position: relative;
  display: inline-block;
  cursor: help;
}
dfn:before {
  content: attr(title);
}
dfn > .dfn-tooltip {
  display: none;
}
dfn:hover > .dfn-tooltip {
  display: block;
  position: absolute; 
  top: calc(1em + 5px);
  max-width: 20em;
  background: #ccc;
  padding: .5em;
  border: none;
  cursor: help;
}
.dfn-tooltip img {
  max-width: 12em;
}

And you can see the results with it working in the screen recording.

[Akhil]

Hi Nigel.

Thank You.
yes it work for me to here: hidden link
hover the clock icon to see the tooltips.

As mention above,
what i am stuck at is for conditional codes to detect if the field is empty. etc.

[Akhil]

My issue is resolved now. Thank you!