ToolTip Customizations

[mlbass]

I tried this: http://demo.theme.co/integrity-1/shortcodes/popovers-and-tooltip/2 and it works, but I’m unable to adjust the width of the tooltip. I tried style but probably using it wrong. Can you please add CSS to your example shortcode that makes the tooltip wider - let’s just say 400px, maybe changes the background color so I can see that too? Or is there a class for this popup I can modify? I couldn’t find a class with the inspect tool.

[extra href="#example" title=“Yeah, tooltip time!” info=“popover” info_place=“top” info_trigger=“hover” info_content=“Place a little extra content in here for informational purposes.” ] Place your content here [/extra]

[nabeel]

Hi Mike,

Thank you for reaching out to us. The tooltip has the main class tooltip and the content wrapper has the class tooltip-inner. To make it wider and change the background color, you can add the following code in the Theme Options > CSS:

.tooltip .tooltip-inner {
    min-width: 400px;
    background: #7a00ff;
}

The popover you see in the demo page has the parent class .popover so you can use the following code to style it:

.popover {
    min-width: 400px;
    background: #7a00ff;
    color: #fff;
}

If you want to style it’s header and content area then you can use the classes .popover-title and .popover-content respectively.

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!