CODEWITHSUNDEEP
javascriptcssgoogle-apigoogle-drive-api
Anthony
Anthony

Reputation: 2010

The Google Save To Drive button is hidden on mouse hovering

I am trying to integrate Save To Drive button into my project.

At first, this is how I did.

<div class="yo-popup-item">

    <script src="https://apis.google.com/js/client:platform.js" async defer></script>
    <div class="g-savetodrive" data-src="${currentURL}&format=csv"
         data-filename="${survey.code}.csv"
         data-sitename="Surveii">
    </div>
    &nbsp; ${lang.SurveyResultList_SaveCSVDrive}

</div>

This is what I got

Normal position

Then I tried this

<div class="yo-popup-item">

    <script src="https://apis.google.com/js/platform.js" gapi_processed="true" async defer></script>
    <div class="g-savetodrive" data-src="${currentURL}&format=csv"
         data-filename="${survey.code}.csv"
         data-sitename="Surveii" data-gapiattached="true"
         style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: middle; display: inline-block; width: 58px; height: 29px;">
    </div>
    &nbsp; ${lang.SurveyResultList_SaveCSVDrive}

</div>

And got this

expected position

This is what I expect. However, after a few times saving files to Google Drive, the button's tooltip position was automatically switched back to like the first screenshot above when I hover my mouse over the button. This happened on both Google Chrome and Mozilla Firefox. Does anyone know how to force the tooltip's position always below the button (like the 2nd screenshot)?

UPDATED: As requested by other users, I will post additional html, css and js codes that directly related to the question.

The Save To Drive button is contained within a div element, which in turn is part of a menu element. The html code of the menu is.

<div class="col-sx-3 col-md-3 col-sm-3">
    <a id="btnDownload" href="javascript: return false;" class="yo-tab form-control" 
       onclick="toggleList(event)
//      var pu = $('#yo-download-list');
//  if (pu.css('display') == 'none')
//  {
//      pu.show();
//  }
//  else
//  {
//      pu.hide();
//  }

       " style="padding: 0px; height: auto;">${lang.SurveyResultList_Download}</a>
    <div style="position: absolute; width: 1px; height: 1px;">
        <div id="yo-download-list" class="yo-popup-5" style="display: none; height: 200px; left: -10px; top: 10px; z-index: 99999; width: 300px;">
            <div class="yo-popup-item"><a target="_blank" href="${currentURL}&format=csv">${lang.SurveyResultList_DownloadCSV}</a></div>
            <div class="yo-popup-item"><a target="_blank" href="${currentURL}&format=xlsx">${lang.SurveyResultList_DownloadExcel}</a></div>
            <div class="yo-popup-item"><a href="${ROOT}/survey-result-list-custom.yo?code=${survey.code}">${lang.SurveyResultList_SetCustomElement}</a></div>
            <div class="yo-popup-item">

                <script src="https://apis.google.com/js/platform.js" gapi_processed="true" async defer></script>
                <div class="g-savetodrive" data-src="${currentURL}&format=csv"
                     data-filename="${survey.code}.csv"
                     data-sitename="Surveii" data-gapiattached="true"
                     style="text-indent: 0px; margin: 0px; padding: 0px; background: transparent; border-style: none; float: none; line-height: normal; font-size: 1px; vertical-align: middle; display: inline-block; width: 58px; height: 29px;">
                </div>
                &nbsp; ${lang.SurveyResultList_SaveCSVDrive}

            </div>
        </div>
    </div>
</div>

And here are the css styles of the elements

.yo-popup-5 {
    position: absolute;
    width: 170px;
    height: 150px;
    left: -10px;
    text-align: left !important;
    opacity: 0.9;
    border-radius: 5px;
    background-color: #01579b;
    top: 20px;
}

.yo-popup-5 .yo-popup-item:hover {
    /*border-right: solid 5px #03a9f4;*/
}

.yo-popup-5 .yo-popup-item {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: #ffffff;
    margin: 10px 1px 10px 10px!important;
}

.yo-popup-5 .yo-popup-item a {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: #ffffff;
    text-decoration: none;
}

.yo-popup-5 .yo-popup-item a:hover {
    color: #00bcd4;
}

.yo-popup .yo-popup-item:hover {
    border-right: solid 5px #03a9f4;
}

.yo-popup-item {
    margin: 20px 1px 20px 10px;
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: #ffffff;
}

.yo-popup-item a {
    font-family: Arial, sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 1.5;
    letter-spacing: -0.1px;
    color: #ffffff;
    text-decoration: none;
}

.yo-popup-item a:hover {
    color: #00bcd4;
}

This is the javascript function toggleList

function toggleList(event) {
    var list = initSelector();

    var cur_child = $(event.currentTarget).next().children();
    cur_child.css('z-index', 102);
    cur_child.slideToggle(500);
    $(list).each(function() {
        var child = $(this).next().children();
        if ($(child).css('display') != 'none' && $(child).prop('id') != $(cur_child).prop('id')) {
            if ($(child).prop('id').endsWith('-list') 
                    && $(child).prop('id').startsWith('yo-')) {
                $(child).css('z-index', (Number($(child).css('z-index')) - 1));
                $(child).slideUp(500);
            }
        }
    });
    event.stopPropagation();
}

I have noticed the html code generated by Google Drive API upon runtime.

HTML Code generated Google Drive API

<div style="display: block; visibility: hidden; position: absolute; width: 356px; left: -10000px; top: -10000px; height: 96px; z-index: 2000000003;">
    <table cellpadding="0" cellspacing="0" dir="ltr" style="width: 356px; height: 96px;" frame="void" rules="none" class=" gc-bubbleDefault pls-container">
        <tbody>
            <tr class="gc-reset">
                <td class="pls-topLeft gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
                </td>
                <td class="pls-topTail gc-reset">
                    <img class="pls-tailbottom gc-reset" style="width: 15px !important; height: 9px !important; max-width: 15px !important; max-height: 9px !important; display: inline; left: 6px; top: 0px;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                    <img class="pls-spacerbottom gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-topRight gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
                </td>
            </tr>
            <tr class="gc-reset">
                <td class="pls-vertShimLeft gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-vertShim gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-vertShimRight gc-reset">
                    <img class="pls-dropTR gc-reset" style="width:5px !important; height:4px !important; max-width: 5px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
            </tr>
            <tr class="gc-reset">
                <td class="pls-contentLeft gc-reset">
                    <img class="pls-tailright gc-reset" style="width: 9px !important; height: 15px !important; max-width: 9px !important; max-height: 15px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                    <img class="pls-spacerright gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-contentWrap gc-reset">
                    <img class="pls-spinner " style="width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; visibility: hidden;" src="https://ssl.gstatic.com/docs/documents/share/images/spinner-1.gif">
                    <div class="goog-bubble-content gc-reset" style="width: 350px; height: 78px;">
                        <iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin: 0px; position: absolute; z-index: 1; border-style: none; outline: none; width: 350px; height: 78px;" tabindex="0" vspace="0" width="100%" id="I0_1522823882765" name="I0_1522823882765" src="https://drive.google.com/savetodrivehover?authuser=1&amp;usegapi=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.HC2g6SRsg_U.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPz5Aj2-ryLqteRLkIrqMk6EuzCaQ#id=I0_1522823882765&amp;_gfid=I0_1522823882765&amp;parent=http%3A%2F%2Fdemo.surveii.com&amp;pfname=&amp;rpctoken=11814994"></iframe>
                    </div>
                </td>
                <td class="pls-dropRight gc-reset">
                    <img class="pls-tailleft gc-reset" style="width: 12px !important; height: 19px !important; max-width: 12px !important; max-height: 19px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                    <img class="pls-spacerleft gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
            </tr>
            <tr class="gc-reset">
                <td class="pls-bottomLeft gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
                </td>
                <td class="gc-reset">
                    <table cellpadding="0" cellspacing="0" style="width:100%" class="gc-reset">
                        <tbody>
                            <tr class="gc-reset">
                                <td class="pls-vert gc-reset">
                                    <img class="pls-dropBL gc-reset" style="width:4px !important; height:5px !important; max-width: 4px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                                </td>
                                <td class="pls-dropBottom gc-reset">
                                    <img class="pls-tailtop gc-reset" style="width: 19px !important; height: 13px !important; max-width: 19px !important; max-height: 13px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                                    <img class="pls-spacertop gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td class="pls-vert gc-reset">
                    <img class="pls-dropBR gc-reset" style="width:5px !important; height:5px !important; max-width: 5px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
            </tr>
        </tbody>
    </table>
</div>

And when I hovered my mouse on the Save To Drive button, the html code was changed to

HTML code (upon mouse-hovering) generated by Google Drive API

<div style="display: block; visibility: visible; position: absolute; width: 356px; left: 255px; top: 324px; height: 96px; z-index: 2000000009;">
    <table cellpadding="0" cellspacing="0" dir="ltr" style="width: 356px; height: 96px;" frame="void" rules="none" class=" gc-bubbleDefault pls-container">
        <tbody>
            <tr class="gc-reset">
                <td class="pls-topLeft gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
                </td>
                <td class="pls-topTail gc-reset">
                    <img class="pls-tailbottom gc-reset" style="width: 15px !important; height: 9px !important; max-width: 15px !important; max-height: 9px !important; display: inline; left: 6px; top: 0px;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                    <img class="pls-spacerbottom gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-topRight gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
                </td>
            </tr>
            <tr class="gc-reset">
                <td class="pls-vertShimLeft gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-vertShim gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:4px !important; max-width: 1px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-vertShimRight gc-reset">
                    <img class="pls-dropTR gc-reset" style="width:5px !important; height:4px !important; max-width: 5px !important; max-height: 4px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
            </tr>
            <tr class="gc-reset">
                <td class="pls-contentLeft gc-reset">
                    <img class="pls-tailright gc-reset" style="width: 9px !important; height: 15px !important; max-width: 9px !important; max-height: 15px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                    <img class="pls-spacerright gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
                <td class="pls-contentWrap gc-reset">
                    <img class="pls-spinner " style="width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; visibility: hidden;" src="https://ssl.gstatic.com/docs/documents/share/images/spinner-1.gif">
                    <div class="goog-bubble-content gc-reset" style="width: 350px; height: 78px;">
                        <iframe ng-non-bindable="" frameborder="0" hspace="0" marginheight="0" marginwidth="0" scrolling="no" style="margin: 0px; position: absolute; z-index: 1; border-style: none; outline: none; width: 350px; height: 78px;" tabindex="0" vspace="0" width="100%" id="I0_1522823882765" name="I0_1522823882765" src="https://drive.google.com/savetodrivehover?authuser=1&amp;usegapi=1&amp;jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.HC2g6SRsg_U.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCPz5Aj2-ryLqteRLkIrqMk6EuzCaQ#id=I0_1522823882765&amp;_gfid=I0_1522823882765&amp;parent=http%3A%2F%2Fdemo.surveii.com&amp;pfname=&amp;rpctoken=11814994"></iframe>
                    </div>
                </td>
                <td class="pls-dropRight gc-reset">
                    <img class="pls-tailleft gc-reset" style="width: 12px !important; height: 19px !important; max-width: 12px !important; max-height: 19px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                    <img class="pls-spacerleft gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
            </tr>
            <tr class="gc-reset">
                <td class="pls-bottomLeft gc-reset">
                    <img class="gc-reset" style="width:1px !important; height:1px !important; max-width: 1px !important; max-height: 1px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/border_3.gif">
                </td>
                <td class="gc-reset">
                    <table cellpadding="0" cellspacing="0" style="width:100%" class="gc-reset">
                        <tbody>
                            <tr class="gc-reset">
                                <td class="pls-vert gc-reset">
                                    <img class="pls-dropBL gc-reset" style="width:4px !important; height:5px !important; max-width: 4px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                                </td>
                                <td class="pls-dropBottom gc-reset">
                                    <img class="pls-tailtop gc-reset" style="width: 19px !important; height: 13px !important; max-width: 19px !important; max-height: 13px !important; display: none;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                                    <img class="pls-spacertop gc-reset" style="width: 1px !important; height: 1px !important; max-width: 1px !important; max-height: 1px !important; display: block;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </td>
                <td class="pls-vert gc-reset">
                    <img class="pls-dropBR gc-reset" style="width:5px !important; height:5px !important; max-width: 5px !important; max-height: 5px !important;" src="https://ssl.gstatic.com/s2/oz/images/stars/po/bubblev1/spacer.gif">
                </td>
            </tr>
        </tbody>
    </table>
</div>

(Notice the div element that I highlighted)

Please take a look and let me know what should I do to relocate the button's tooltip. Thanks.

Upvotes: 0

Views: 348

Answers (1)

markzuckerberg
markzuckerberg

Reputation: 11

This has nothing to do with Drive API at all.

Check the order to which you place your < div > tags, your DOM elements in the page. Observe the hierarchy of page elements.

Upvotes: 1

Related Questions