Perspective: How to use css theme classes on components?

I found this to implement tooltips:
https://www.w3schools.com/css/css_tooltip.asp
But I have no idea how to actually implement it in Perspective :thinking:
I can put it into my own theme file, but how do I actually apply it to a component in Perspective?

3 Likes

I have the same question, in general, after creating my own class in css (so far is fine), then how do I insert my own division in a view referring to that class ?

Thanks if someone could help.

perspective, css

1 Like

Instead of .tooltip, you should supply something like .psc-MyStyleClass. You should then attach a Perspective Style Class named “MyStyleClass” to the component which you would like to attach the tooltip to. There is no way to attach a css class of “tooltip” to a Perspective component, but you can attach Perspective Style Classes, which are then attached to the component with the pattern of "psc-" + <style_class_name>.

If you want to attach the tooltip to a component across ALL of your projects, you would ignore the “classes” in the example and instead place the properties from that example into the component.

To be clear - we do NOT recommend this, and I would suspect that if you do this and then encounter an issue with the component that support would not help you. We build and test components with the properties you see in the .css files because those are the properties we feel the components need to behave properly across hundreds of scenarios.

There is no way to insert your own <div> element, outside of the Markdown component (not that the Markdown component would do what you want). The only way to “apply” a class to a component is through using Perspective Style Classes.

2 Likes

Thanks for the reply,

Is it possible to add “animate” for individual SVG elements? I couldn’t make it work, if I can do that, then I can work around everything else I need,

I was able to get some animations working by doing as cmallonee suggested. Create or modify one of the CSS theme files and do something like:

.psc-SomeStyleName {
    animation: <some animation CSS here>;
}

Keyframes work, as well. Then you just type SomeStyleName into the style.classes property of your component and you’re good to go.

These posts might explain it better than I can.

On another note, I was able to get a tooltip to show up with some static text, but I’ve been looking for a way to change it within the designer, maybe as a component property. I am learning as I go with CSS, so if anyone has any suggestions I would appreciate it.

1 Like

Thank you,
It did it, more or less the same way you indicated, I just set the animation on the object itself, instead of the css class, but the result is the same, thank you again for the tip, I try to upload a small demo video.

1 Like

I guess I did fail to mention that you could do it that way. I’ve been interested in making animations easily repeatable, tunnel vision gets us all, apparently!

1 Like