Quasar 0.14.4 - IE11 + tooltip rendering (solved)



  • I have a page with own table. When the page is loaded in Chrome rendering speed and UI experience is as expected but if IE11 is used tooltips are visible before the complete page is rendered.
    Once the page is ready to use q-toooltips disappears and are working as expected (onmouseover). I’ve tried to wrap them into v-if and use timeout but all tooltips appears for a while again at the end of rendering.

    IE11 - before the page is user responsive- rendering:
    IE11 - before the page is user ready - rendering

    IE11 - page is ready to use:
    IE11 - page is readu for use

    Any idea for workaround or code changes?

     <div class="column z-col col z-align-right gt-sm" style="min-width:66px">
              <span v-if="course.STUDENTI_POCET_PLAN!==course.STUDENTI.length">
                {{course.STUDENTI_POCET_PLAN}}/
                <span style="color:red">{{course.STUDENTI.length}}
                  <q-tooltip>planned students &#8800; entered students</q-tooltip>
                </span>
              </span>
              <span v-if="course.STUDENTI_POCET_PLAN===course.STUDENTI.length">
                {{course.STUDENTI_POCET_PLAN}}/{{course.STUDENTI.length}}
              </span>
            </div>
    


  • That is ugly! I would probably do something on mounted (and upgrade as soon as possible to v0.16)

    mounted () {
        console.log('The instance has been mounted')
    
        // Note that mounted does not guarantee that all child components have also been mounted.
        // If you want to wait until the entire view has been rendered, you can use vm.$nextTick
        // inside of mounted:
        this.$nextTick(function () {
          // Code that will run only after the
          // entire view has been rendered
        })
      },
    

    Here is a great resource for you: https://github.com/LeCoupa/awesome-cheatsheets/blob/master/frontend/vue.js



  • this.$nextTick did the trick to solve IE11 issue.

    <q-tooltip v-show="isRendered" :offset="[0,15]">{{course.ZKRATKA}} - ID: {{course.ID}}</q-tooltip>
    
    mounted () {
          this.$nextTick(function () {
            this.isRendered = true
          })
        }
    

    Recommended source with cheatsheets is also great and not only for Vue Js.

    Thanks a lot for your advice!