Topic
19 replies Latest Post - ‏2014-04-15T09:05:54Z by thara_krish
captain_knave
captain_knave
46 Posts
ACCEPTED ANSWER

Pinned topic Tooltip for 30 fields

‏2011-10-06T22:39:28Z |
I have a form that has round about 30 fiels as input text, these 30 fields map to 30 fields to a database (SQL server) connected in background. How is it possible to apply tooltip to all these fields?

a. One idea is to have a section with 2 columns, add fields to the right most section and on the left section add image (with label visible) that can display Alternative text.

b. Other way to use custom HTML and use the script attached.

However the tooltip displayed by the 2nd method is pretty decent as compared to method 1. But it is not possbile to change all the 30 fields to custom html and bind variables.

Can someone suggest how to add tooltips like in method 2 without adding custom html fields in the coaches.

Thanks in advance.

-K

Attachments

Updated on 2013-03-21T21:12:32Z at 2013-03-21T21:12:32Z by SystemAdmin
  • SystemAdmin
    SystemAdmin
    7615 Posts
    ACCEPTED ANSWER

    Re: Tooltip for 30 fields

    ‏2011-10-07T01:06:48Z  in response to captain_knave
    DHTML/JavaScript are your friends. Create the base coach, then add in a hidden custom HTML block to do whatever you need to do to that HTML to add the tool tips. If it were me and I thought I had to do this more thn once, I'd probably write a service that could generate the JS from a name/value pair array consisting of the tooltip and the I'd of the element to apply it to.
    • captain_knave
      captain_knave
      46 Posts
      ACCEPTED ANSWER

      Re: Tooltip for 30 fields

      ‏2011-10-07T22:40:00Z  in response to SystemAdmin
      Thanks for your answer Andrew. How will i display the tooltip if the custom HTML block is hidden?
      • SystemAdmin
        SystemAdmin
        7615 Posts
        ACCEPTED ANSWER

        Re: Tooltip for 30 fields

        ‏2011-10-08T02:35:56Z  in response to captain_knave
        You are not understanding.

        Step 1 - Create your form.
        Step 2 - Figure out what parts of your form need hovers. (You will need to view source in HTML to figure this out)
        Step 3 - in your custom HTML use javascript/DHTML to add the hover items to the right elements.
        Step 4 (For experts only) write a framework so that you don't have to do this by hand over and over.

        So for example, I created a form and decided I wanted a hover on the "InputText0_Label" element. I then wrote the following in custom HTML -

        
        <script> var myLabel=document.getElementById(
        "InputText0_Label"); myLabel.setAttribute(
        "title", 
        "This is a Hover Title"); </script>
        


        At the bottom of my form. Now that Hover appears on the label for the Input Text.

        Alternatively, you could create a custom class that you add to your element, set its value, and modify the coach designer XSLT to add the title element to the labels. Whichever approach you choose, I recommend you start simple until you understand what is needed. Do not start with your 30 field form.
        • kolban
          kolban
          3314 Posts
          ACCEPTED ANSWER

          Re: Tooltip for 30 fields

          ‏2011-10-08T16:56:03Z  in response to SystemAdmin
          Andrew,
          That is really cool and seems simpler than using Dojo functions. Your solution uses the "title" attribute of HTML that I didn't know existed. Here is a link to a description of that attribute in case others want to read more.

          http://www.w3schools.com/tags/att_standard_title.asp

          Thanks again.

          Neil
        • captain_knave
          captain_knave
          46 Posts
          ACCEPTED ANSWER

          Re: Tooltip for 30 fields

          ‏2011-10-26T00:58:46Z  in response to SystemAdmin
          Hi Andrew,

          So i got this thing working couple of days ago. This is how it was implemented:

          1. Create a Custom HTML Block (be it be hidden)
          2. In the presentation section, create a function for tooltip (basically a DOJO script someone passed me on previous thread) with 2 arguments - element id and the text to be displayed as tooltip.
          3. Call the function using element id and hovertext

          function addTooltip(element_id, hovertext)
          {
          DOJO SCRIPT
          }

          Call function addTooltip("fName","Firstname");

          Note: Dont forget to import the image file and call it using "tw.system.model.findManagedFileByPath("tooltip.jpg", TWManagedFile.Types.Web).url"
          • kolban
            kolban
            3314 Posts
            ACCEPTED ANSWER

            Re: Tooltip for 30 fields

            ‏2011-10-26T01:16:39Z  in response to captain_knave
            Captain,
            How is the "tooltip.jpg" image being used? I couldn't determine that by a quick scan of your post.

            Neil
            • captain_knave
              captain_knave
              46 Posts
              ACCEPTED ANSWER

              Re: Tooltip for 30 fields

              ‏2011-10-26T01:29:42Z  in response to kolban
              Hi Neil,

              1. Import the image in the Designer using the Files->WebFile

              2. In the Custom HTML block write following

              function addTooltip(id,hover_text){
              var e = dojo.byId(id + "_Label");
              var imgId = id + "_img";
              e.innerHTML += "" id=" + imgId + "/>";
              new dijit.Tooltip({connectId: imgId,label: text});
              }

              //function calling:
              addTooltip("fName","First name");
              here, fName is the controlId and not the variable name.
              Hope this helps :)
          • HarishKumarRamKumar
            HarishKumarRamKumar
            72 Posts
            ACCEPTED ANSWER

            Re: Tooltip for 30 fields

            ‏2012-04-06T06:42:33Z  in response to captain_knave
            Can I know where the tooltip.jpg has to be imported?
            • SystemAdmin
              SystemAdmin
              7615 Posts
              ACCEPTED ANSWER

              Re: Tooltip for 30 fields

              ‏2012-04-12T14:46:19Z  in response to HarishKumarRamKumar
              Sorry, was off line for a while.

              If you add a customHTML block in your coach and go to the "Visibility" tab you can make its visibiilty hidden and put your code in there. You upload the image file via the Process Designer as a web file.

              I ususally put my JS/DTHML in a hidden section at the end of the coach. You can then basically do

              
              document.getElementById(
              "myLabelId").someAttribute = your changed value
              


              Andrew Paier | Director of Special Operations | BP3 Global, Inc. www.bp-3.com
              • SystemAdmin
                SystemAdmin
                7615 Posts
                ACCEPTED ANSWER

                Re: Tooltip for 30 fields

                ‏2013-03-01T00:58:11Z  in response to SystemAdmin
                I added this code right next to the label itself. Site Contact Name <html> &nbsp(?) </html>

                It appears like this on the UI -
                Site Contact Name (?):
                It shows the sample help text on Hover of mouse.
                This is what I wanted to achieve. But the question is - Is this the right way to do? Please suggest
        • HarishKumarRamKumar
          HarishKumarRamKumar
          72 Posts
          ACCEPTED ANSWER

          Re: Tooltip for 30 fields

          ‏2012-04-06T06:19:23Z  in response to SystemAdmin
          Andrew,

          Can I know the need of setting the visibility of custom HTML block as hidden?
          • HarishKumarRamKumar
            HarishKumarRamKumar
            72 Posts
            ACCEPTED ANSWER

            Re: Tooltip for 30 fields

            ‏2012-04-06T06:26:58Z  in response to HarishKumarRamKumar
            Have a look at the following code.
            It creates 2 labels and provides tooltip while hovering.
            I need the labels in my coaches to perform the same action.
            Where should I relate the labels in my coach to this piece of code?
            <!-- make the question mark bold and blue -->
            <style>
            span.pt_helpIcon {font-weight: bold; font-color: 'navy';}
            </style>

            <!--
            Here are the field labels, extracted with a help question mark beside each.
            Hover over the question mark to show the help popup.
            Normally you would put this in the "label" box of a field, replacing
            less than with < and greater than with >
            -->

            First Name (?)
            Last Name (?)

            <!-- adding style for my help text -->
            <style>
            p.my_help {
            text-align: left;
            margin-bottom: 15px;
            font-size: 10pt;
            font-weight: normal;
            }
            </style>

            <!-- include the dojo - dijit tooltip code -->
            <script>
            dojo.require("dijit.Tooltip");
            </script>

            <!-- create divs with the help text --- these will not be visible -->

            Please enter your first name as it appears on your government-issued identification.


            Please enter your last name as it appears on your government-issued identification.

            • HarishKumarRamKumar
              HarishKumarRamKumar
              72 Posts
              ACCEPTED ANSWER

              Re: Tooltip for 30 fields

              ‏2012-04-06T06:33:18Z  in response to HarishKumarRamKumar
              This is the exact code.

              <!-- make the question mark bold and blue -->
              <style>
              span.pt_helpIcon {font-weight: bold; font-color: 'navy';}
              </style>

              <!--
              Here are the field labels, extracted with a help question mark beside each.
              Hover over the question mark to show the help popup.
              Normally you would put this in the "label" box of a field, replacing
              less than with < and greater than with >
              -->

              First Name (?)
              Last Name (?)

              <!-- adding style for my help text -->
              <style>
              p.my_help {
              text-align: left;
              margin-bottom: 15px;
              font-size: 10pt;
              font-weight: normal;
              }
              </style>

              <!-- include the dojo - dijit tooltip code -->
              <script>
              dojo.require("dijit.Tooltip");
              </script>

              <!-- create divs with the help text --- these will not be visible -->

              Please enter your first name as it appears on your government-issued identification.


              Please enter your last name as it appears on your government-issued identification.

  • PhaniRaju
    PhaniRaju
    155 Posts
    ACCEPTED ANSWER

    Re: Tooltip for 30 fields

    ‏2013-03-01T08:51:50Z  in response to captain_knave
    Can anyone tell me Does the procedure and code given in Answer.pdf file works for BPM 8.0.1 ??

    Thanks
    Phani.
    • SystemAdmin
      SystemAdmin
      7615 Posts
      ACCEPTED ANSWER

      Re: Tooltip for 30 fields

      ‏2013-03-06T03:31:46Z  in response to PhaniRaju
      Well, the first question is are you using the heritage coaches or Coach Views. For coach views you would need to follow a very different approach.

      Second - the technologies mentioned in the thread are not BPM specific as they are all simply leveraging browser technology, so if they worked in a given browser before, I would guess they would continue to do so now.

      Andrew Paier | Director of Special Operations | BP3 Global, Inc. www.bp-3.com
  • PhaniRaju
    PhaniRaju
    155 Posts
    ACCEPTED ANSWER

    Re: Tooltip for 30 fields

    ‏2013-03-06T05:06:33Z  in response to captain_knave
    Hi Andrew,

    I am using Coach Views not Heritage Coaches...
    Can you tell me the procedure or any simple example how to do this for Coach Views 8.0.1

    Thanks
    Phani.
    • SystemAdmin
      SystemAdmin
      7615 Posts
      ACCEPTED ANSWER

      Re: Tooltip for 30 fields

      ‏2013-03-21T21:12:32Z  in response to PhaniRaju
      Well, I don't think the OOTB views provide this, so you need to make your own views. You can use the OOTB views as the base line. Basically your work would be

      1. Figure out in basic HTML how you get the tool tip affect you want. I think the html element has a way to do this if you set the right attribute. W3schools knows for sure.
      2. Take one of the controls and modify the load to add in a hard coded value for this so you can prove you can get it working.
      3. Take that hard coded value and make it a configuratble value.
      4. Add your new nifty tooltip enabled Coach Views to your coaches.

      Alternative you could try and figure out how to simply add your own JS processing after the page renders to go through and decorate the HTML with the right attribute, but that is going to be hard for the next developer to understand.

      Andrew Paier | Director of Special Operations | BP3 Global, Inc. www.bp-3.com
  • thara_krish
    thara_krish
    12 Posts
    ACCEPTED ANSWER

    Re: Tooltip for 30 fields

    ‏2014-04-15T09:05:54Z  in response to captain_knave

    Hi Neil,

     

    I need to do ToolTip in a Table Cell. Can you please tell me how to do that.

     

    Thanks,

    Thara