Using tooltips with x_extra all inline

[lifeinthecave]

Hey there. I am working on a website where we are using custom shortcodes to display user information and other content specific to each user. As a result we have to write a good deal of the design using inline html and css. As an example - this is the button I had to make so that the user shortcode would behave properly:

<p><a class="e2040-42 x-anchor  x-anchor-button x-icon" href="[accessally_field_value operation_id='6']"  target="blank" style="width:70%; color:#36475e; height:45px;" ></i>[icon type="phone" style="padding:10px;"] Schedule Your Next Strategy Call</a><br />

I also had to add:

.e2040-42:hover {
color: #e27954 !important;
}

to the text elements css.

So here is my question:

I am creating a tooltip over text using the x-extra cornerstone shortcodes. I need to be able to place inline html and css inside the tooltip. Is this possible, I cant seam to make it work.

I also need to know how to make modifications to the tooltip style on just the one page.

Is there another element I should attempting this with instead of x-extra?

Also - I cant immediately give you access as I am not heading this project. I will have to seek permission from someone else on the team. I am hopping this gives you enough info to work with. Ultimately what I need is a tooltip like effect that pops up and will receive info from our custom shortcodes and allow me to put in links, or buttons. Or even have a global block element pop up on hover - that would be great.

one other idea I had, was using the accordion element, if it could be modified in a way that makes it open on hover and close when not.

thank you

Cece

[nabeel]

Hi Cece,

Thank you for reaching out to us.

@lifeinthecave

I am creating a tooltip over text using the x-extra cornerstone shortcodes. I need to be able to place inline html and css inside the tooltip. Is this possible,

There’s a style property of the [extra] shortcode where you can add inline CSS e.g:

[extra href="#example" title="Yeah, tooltip time!" info="tooltip" info_place="top" info_trigger="hover" style="color: yellow;"] Place your content here [/extra]

For the tooltip info, adding inline HTML is not supported in the shortcode but you can add HTML in replace of content.

@lifeinthecave

I also need to know how to make modifications to the tooltip style on just the one page.

You can use the class property of the shortcode and apply your styles to the specific class on a specific page. (see https://demo.theme.co/integrity-1/shortcodes/popovers-and-tooltip/)

@lifeinthecave

Is there another element I should attempting this with instead of x-extra?

As an alternative, you can use the Classic Button element and select Tooltip in the Info dropdown to show the tooltips on hover.

Hope this helps!

[lifeinthecave]

Thanks for you’re help. I dont think I explained myself very well. I need to be able to place html (such as an embedded video) or a global block via shortcode inside the tooltip content. As far as I can tell - it only displays as pre-formatted text.

here is what I have:
[extra title="Membership Information<br />Change your Membership Level" info="tooltip" info_place="top" info_trigger="hover" style="width:500px;"] Premium Level [/extra].

this is the result:

additionally attempting to modify the width from within the style option has no impact.

[ruenel]

Hello @lifeinthecave,

The tooltip that @Nabeel has explained will only accept plain text. Regretfully there isn’t a feature in the theme that will have a tooltip with advanced HTMl contents. You may need to install 3rd party plugin instead. Perhaps the WordPress repository can help you.

• https://wordpress.org/plugins/search/tooltip/

Best Regards.