Plugins Intro Tour Tutorial Support Disable focus on element overlay ...
Notifications
Clear all

[Solved] Disable focus on element/overlay

5 Posts
2 Users
0 Likes
18 Views
Posts: 9
Customer
Topic starter
(@jess)
Active Member
Joined: 1 year ago

Hi! Usually when you add a tour item/tool tip, the subject element/overlay is somewhat highlighted and the background is either dimmed our blurred via the option (Should Be Content Under Overlay Blurred?). Is there any way to remove this dimming/blurring effect entirely? Basically I need the whole page to remain the same colour, and the tool tip to simply appear at the designated places. Help?

Thanks!

4 Replies
Posts: 94
(@admin)
Member
Joined: 3 years ago

Hi Jess.

Just add this CSS: 

.dpit-overlay{
    display: none !important;
}

Or just for specific tour:

#dpit-wrapper-<tour-id> .dpit-overlay{
    display: none !important;
}

 

Reply
Posts: 9
Customer
Topic starter
(@jess)
Active Member
Joined: 1 year ago

Thanks a lot. I tweaked it a bit (.dpintro-overlay) and it worked. 🙂

Can you also advise what is the selector for the tool tip itself, as I want to add a fade-in effect to it when it appears on the screen. Now that the overlay is disabled, it looks sluggish/not smooth at all when the tooltips appear abruptly out of nowhere. I'd like to add a transition effect but I just need to specify the selector itself - can you help please, thank you!

 

Regards

Reply
1 Reply
(@admin)
Joined: 3 years ago

Member
Posts: 94

@jess you are right. Identifiers, that I sent you are for new major update, that is coming soon. My bad. Please keep in mind to change .dpintro-... to .dpit-... after v5.x.x is released. You can find details about coming update here.

Reply
Posts: 9
Customer
Topic starter
(@jess)
Active Member
Joined: 1 year ago

Thanks for the update!

Would you be able to advise please on what is the selector so I can add css to the tooltips and make them appear with fadein. Thanks!

Reply
Share:
Top chevron-right-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram