Question T17233
Visible to All Users

Equip my survey question titles with React popup tip component

created 10 months ago

I need to provide my user with (sometimes long) on-demand explanation/description of questions, so basically something like a featured tooltip. Specifically I need to integrate a react bootstrap popover https://react-bootstrap-v4.netlify.app/components/overlays/#popovers

Is this the way https://surveyjs.io/form-library/examples/create-custom-question-renderer/reactjs?

Could you give me some advice to write the right customization that work for any type of questions? Basically if a string tooltip question property is provided SurveyJS will show a question mark circle button next to the title that will pop up the tooltip property value if pressed

thanks a lot

Answers approved by surveyjs Support

created 10 months ago (modified 10 months ago)

[Updated]

Hello,
I believe that the easiest option to display a custom popup component is to register a custom title action which would invoke a popup. For more information on how to register a custom title action, please visit Context Actions in Element Titles.

You can also override the default component which is used to render an Action. For this, register a custom React component within the ReactElementFactory under a specified name and set this name as an IAction.component attribute.

I created the demo for your reference: please check the attached zip-archive.

JavaScript
import React from "react"; import "bootstrap"; import { Button, Popover, OverlayTrigger } from "react-bootstrap"; export const popover = ( <Popover id="popover-basic"> <Popover.Header as="h3">Popover right</Popover.Header> <Popover.Body> And here's some <strong>amazing</strong> content. It's very engaging. right? </Popover.Body> </Popover> ); export const Example = () => ( <OverlayTrigger trigger="click" placement="left" overlay={popover} rootClose={true} > <Button variant="success">Click me to see</Button> </OverlayTrigger> );

Clipboard-File-1.png

Please let me know if you require further assistance.

Thanks

We hope you enjoyed the level of service you received. If so, we would love if you could leave your feedback on SurveyJS page at g2.com. As we’re building our business, every review helps build credibility for future customers and your feedback would be greatly appreciated.

Thanks

    Show previous comments (1)

      You're very welcome!

      Please feel free to contact us if you have any further questions.

        Is there a property to move the title actions next to the title instead to the extreme right border? Should I change the css?

        thank you

          I solved with css. thank you