No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Quasar 0.14.4 - IE11 + tooltip rendering (solved)

    Help
    2
    3
    616
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • mojimo
      mojimo last edited by mojimo

      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>
      
      1 Reply Last reply Reply Quote 0
      • nothingismagick
        nothingismagick last edited by

        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

        1 Reply Last reply Reply Quote 0
        • mojimo
          mojimo last edited by mojimo

          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!

          1 Reply Last reply Reply Quote 0
          • First post
            Last post