javascriptsharepointhover

Adding hover message to choices in SharePoint


I'm not a programmer which may explain why I'm having difficulty wit this task.

I created a survey on sharepoint and I want to add hover messages to some of the multiple choice options to explain what the options are about. I would like to have different messages displayed when I hover on the options Natural, Technical and Economical. I tried editing the title below with the hover display message but it doesn't save.

Please let me know if it's possible.

This is the part of the survey that I want to edit and different messages displayed when I hover on any of the Hazard types options


Solution

  • You may use jQuery tooltip.

    Sample demo:

    <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">    
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script type="text/javascript">
            $(function () {
                $('span[title="Natural"]').tooltip({
                    content: "Natural Hazard"
                });
                $('span[title="Technical"]').tooltip({
                    content: "Technical Hazard"
                });
                $('span[title="Economical"]').tooltip({
                    content: "Economical Hazard"
                });           
            })
        </script>
    

    enter image description here