Adding tippyg tooltip - where is my mistake?

HTML-CSS
1

I’ve tried adding tooltip that would display long sentences above the links on the right, but I can’t make it to work properly. Need some help with that.

2

What is the issue exactly?

Why are you not using the content property in the tippy options object instead of the HTML title attribute?

There is also a data-tippy-content data attribute you can use as well if you want it in the HTML and not the options object.

data-tippy-content example.

<li><a href="https://codepen.io/MaxAltena/pen/rNGGKzW" class="tooltip" data-tippy-content="People remember uncompleted or interrupted tasks better than completed tasks." data-tippy-theme="light rounded">Zeigarnik Effect</a></li>
3

when i put in content, nothing shows, when i put in title, it shows, but it’s not in tooltip :-/

4

You should be able to just replace all the title attributes with data-tippy-content.

Although, I’m not sure about the accessibility.

They have a section on it.

Read the docs if you didn’t do so.

5

thanks. I did that and it works.

it’s also silly of me to think that tooltip would show if its black on black. lol

6

No problem.

Here is a content property example as well. I think it is meant for global content because otherwise, you have to have different selectors on each element (it is just easier to use the attribute anyway).

<li><a href="https://codepen.io/MaxAltena/pen/rNGGKzW" class="tooltip1" data-tippy-theme="light rounded">Zeigarnik Effect</a></li>

tippy('.tooltip1', { content: "People remember uncompleted or interrupted tasks better than completed tasks.", arrow: true });
7

I’m unsure how to style it differently. can you help?
I tried via class .t2 but doesnt wanna accept for some reason

8

You can use the built-in .tippy-content class.

.tippy-content {
  color: yellow;
  background-color: red;
  font-family: Open Sans;
}
1 Like
9

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