Post
Ask Question

Tooltip In Vue.js 2 With Example

Q: What is Tooltip?

 
A: A Tooltip or infotip is a small message window that appears when a cursor hovers over an icon, image, hyperlink, text, or any other element rendered in our GUI.
 
For working code of tooltip: JSFIDDLE 
 
Example 1 - Tooltip over a Button
 
 
For this we will set title property in our template:
  1. <button title="Tooltip content to be displayed">  
  2.    Hover Me  
  3.  </button>  
Example 2
 
Displaying Tooltip when the cursor hovers over an item of a rendered list,
 
 
Here we will take help of v-bind (:  - shorthand notation) for binding each element of list to title property by following the below simple steps:
   
Step 1
 
Inside script tag, 
  1. var example1 = new Vue({  
  2.   el: '#example',  
  3.   data: {  
  4.     items: [  
  5.       { message: 'Foo' },  
  6.       { message: 'Bar' }  
  7.     ]  
  8.   }  
  9. })  
Step 2
 
Inside Template tag,
  1. <ul id="example">  
  2.      <li v-for="item in items" :title="item.message">  
  3.        {{ item.message }} <br>  
  4.      </li>  
  5.    </ul>  
Similarly, using the concepts of v-bind and title property learned in this blog we can display tooltip over any GUI element.
 

Conclusion

 
We learned how to display tooltip when our cursor hovers over any rendered GUI element.