Short code help

[esmarketing]

Can you tell me what im doing wrong here. I can not get the shortcode to show up??
[[image src=“http://unsplash.it/500/500” alt=“Your alt text”][title=“Tool tip text” info=“tooltip” info_place=“bottom” info_trigger=“hover”]Place your content here [/extra]]

[jade]

Hi Johnathan,

It looks like you are not using the shortcode correctly.

If you want to use the image shortcode, please refer here for a guide:

http://demo.theme.co/integrity-1/shortcodes/images/

Hope this helps.

[esmarketing]

I want to use the short code image and the drop down short code that you will see in the short i gave

Putting this together
[image type=“rounded” src=“http://yourdomain.com/image.jpg” alt=“Text”]
+
[extra href="#example" title=“Yeah, tooltip time!” info=“tooltip” info_place=“top” info_trigger=“hover”] Place your content here [/extra]

[esmarketing]

do you have something that show you how to use short code when your building them?

[friech]

Hi Johnathan,

You mean, you want an image that shows a tooltip/popup when hovered? If so, please update your shortcode to this:

[image type="thumbnail" src="IMAGE URL HERE" link="true" href="URL HERE" info="tooltip" info_place="top" info_trigger="hover" info_content="Write a little extra information here to describe the photographs" title="TITLE HERE" alt="Example"]

Now let’s define the attributes of that shortcode.

src: the path or URL to your image.
href: the URL that you want the image to link to.
info: “popover” or “tooltip.” see the examples here. The tiny one is the tooltip.
info_place: the position of tooltip to which side it should show up: “top,” “right,” “bottom,” or “left.”
title: the text that will show on tooltip.
info_content: extra content for the popover only.

Or

If you’re using Cornerstone builder, please use the Classic Image element instead, turn on the LINK option of that Classic Image and you’ll get the tooltip/popover options.

Hope it helps,
Cheers!

[esmarketing]

Yes i have Pro i did not know that you can do that with the Classic Image

[esmarketing]

I did not know how to example what I need to do but here is what I would like to have done.
https://www.screencast.com/t/uVO2LtTjkNj

[paul.r]

Hi,

To achieve that, you can try adjusting the width or font size of your popover.

Try adding this in Theme Options > CSS

.popover {
       width: 250px;
}

.popover-title {
       font-size: 15px;
       text-lign:center;
}

You may change 250px and 15px to adjust.

Hope that helps

[esmarketing]

Got the CSS in but it wont center this is what i’m seeing https://www.screencast.com/t/LFQcotRajJ

[Prasant]

Hello Johnathan,

Thanks for updating the thread.

Actually there is a typo mistake in the code that was shared previously. Please use following code and let us know how it goes.

.popover-title {
       font-size: 15px;
       text-align:center;
}

Thanks.