5 Replies Latest reply: Jul 6, 2013 3:11 AM by jariola RSS

    Item tooltip background not solid

    sect55

      I created a tooltip using CSS and #CUSTOM_ITEM_HELP_TEXT# to create item tooltips (I followed a demo held by Tyson Junglet/Dan McGhan in 2012 Skillsbuilder presentation).

       

      It consists of the following CSS:

      <style>
      .tooltip {
          cursor: help;
          text-decoration: none;
          position: relative;
          color: #5555; //555
      }
      .tooltip span {
          margin-left: -999em;
          position: absolute;
      }
      .tooltip:hover span {
          border-radius: 5px 5px;   
          -moz-border-radius: 5px;
          -webkit-border-radius:5px;
          box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
          -webkit-box-shadow: 5px 5px rgba(0,0,0,0.1);
          -moz-box-shadow: 5px 5px rgba (0,0,0,0.1);
          font-family: Calibri, Tahoma, Geneva, sans-serif;
          position: absolute; left: 1em; top: 1em; z-index: 99;
          margin-left: 0; width: 250px;
          color: #3333; //333
          white-space:normal;
          text-decoration: none;
        opacity:2.0;
        filter:alpha(opacity=200); /* For IE8 and earlier */

      }
      .custom_help {
         background: #8FC4D6; //#9FDAEE;
         border: 1px solid #2BB0D7;
         padding: 0.8em 1em;
         text-align: left;
         text-decoration: none;
      }
      </style>

      declared in the page's header text

       

      I then use two label templates (one for required, and one for optional):

       

      Required Label template:

      Before Label:

      <img src="#IMAGE_PREFIX#themes/theme_2/images/required.gif" alt="#VALUE_REQUIRED#" tabindex="999" /><a class="tooltip" href="#" tabindex="-1">

      After Label::

      <span class="custom_help">#CURRENT_ITEM_HELP_TEXT#</span></a>

       

      Optional Label template:

      Before Label:

      <a class="tooltip" href="#" tabindex="-1">

      After Label::

      <span class="custom_help">#CURRENT_ITEM_HELP_TEXT#</span></a>

       

      It works great for Firefox 12 but it does not work for IE (I tried it for IE7 and IE9)

       

      I have a working example on APEX.ORACLE.COM

      Workspace: rgwork

      User: TESTER

      Password: TEST123

      Application: DB REQUEST (27964)

       

      Just hover over any of the label, and you will see the tooltip backgroup looks transparent and not solid in IE 7/9 but works fine in Firefox.

       

      At work, I use APEX 4.1 with Oracle 10g Rel 2 and IE 7. (IE 7 is our standard, and we will be going to IE 9 in the coming months)

       

      Can someone please help me ASAP. I have an application going into production this month.

       

      Thank you.

       

      Robert

      http://apexjscss.blogspot.com

        • 1. Re: Item tooltip background not solid
          jariola
          
          

          Hi,

           

          I did comment out lines below lines and now it seems to work

          opacity:2.0;
          filter:alpha(opacity=200); /* For IE8 and earlier */
          

           

          Regards,

          Jari

          • 2. Re: Item tooltip background not solid
            sect55

            Jari,

             

            It still does not work.on IE7 accessing APEX.ORACLE.COM and it doesn't work in my environment using IE 9..

             

            Thanks,

            Robert

            http://apexjscss.blogspot.com


            • 3. Re: Item tooltip background not solid
              jariola

              Hi,

               

              I did make few more changes. Here is new CSS

              .tooltip {
              cursor: help;
              text-decoration: none;
              color: #555555;
              }
              .tooltip:hover {
              position: relative;
              }
              .tooltip:hover .custom_help{
              -webkit-box-shadow: 5px 5px rgba(0,0,0,0.1);
              -moz-box-shadow: 5px 5px rgba (0,0,0,0.1);
              -moz-border-radius: 5px;
              -webkit-border-radius: 5px;
              font-family: Calibri, Tahoma, Geneva, sans-serif;
              box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.1);
              border-radius: 5px 5px;
              position: absolute;
              left: 1em;
              top: 1em;
              margin-left: 0;
              width: 250px;
              color: #333333;
              white-space: normal;
              text-decoration: none;
              display: block;
              }
              .custom_help {
              background-color: #8FC4D6;
              border: 1px solid #2BB0D7;
              padding: 0.8em 1em;
              text-align: left;
              text-decoration: none;
              display:none;
              z-index: 99;
              }
              
              

               

              See app id 69040 page 3 in your workspace does it work properly in IE.

               

              Regards,

              Jari

              • 4. Re: Item tooltip background not solid
                sect55

                Thanks Jari.

                 

                I had to change my external css (tooltip.css) to another name(tooltip2.css) for it to take effect. Even if I delete my cache, delete the static file, logoff/login, and load a new tooltip.css, it still "looks at the deleted one. Do you know how to fix this besides using a different name? Any thoughts? I would appreciate it.

                 

                Robert

                http://apexjscss.blogspot.com

                • 5. Re: Item tooltip background not solid
                  jariola

                  Hi,

                   

                  Sorry, I do not know how fix it.

                  I have had similar issues and do not know how fix it other than change file name.

                  But, it is better store static files to web server folder than workspace.

                   

                  Regards,

                  Jari

                   

                  Message was edited by: jariola Maybe you like follow this discussion if someone have solution https://forums.oracle.com/message/11096818#11096818