HOME  >   HTML5 CANVAS  >   CSS3 ANIMATION  >   Tooltip User Notification Popup box Based on Vue.js
Tooltip User Notification Popup box Based on Vue.js
BY Matthew15 Jan,2021

This time we are going to bring another Tooltip user notification pop-up box plugin based on Vue.js, it features a different tooltip from others, it focuses more on user notification features, so we can directly integrate this plugin into our own system to provide user notification features.


Tooltip User Notification Popup box Based on Vue.js
HTML Body Code
<transition name="fadeStart" v-cloak>
      <div v-if="show" class="tooltip">
        <div id="heading">
          <div class="heading-left">
            <h6 class="heading-title">Notifications</h6>
          <div class="heading-right">
            <a class="notification-link" href="#">See all</a>
        <ul class="notification-list">
          <li class="notification-item" v-for="user of users">
            <div class="img-left">
              <img class="user-photo" alt="User Photo" v-bind:src="user.picture.thumbnail" />
            <div class="user-content">
              <p class="user-info"><span class="name">{{user.name.first | capitalize}} {{user.name.last | capitalize}}</span> left a comment.</p>
              <p class="time">1 hour ago</p>
Css Code
.container {
  width: 20rem;
  height: 20rem;
  grid-area: main;
  -ms-flex-item-align: center;
  align-self: center;
  justify-self: center;
  margin:10px auto;

h2 {
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 2rem;
  color: #1f2022;

ul {
  list-style-type: none;
  padding: 0.5rem 1rem;
  margin: 0 0 0.5rem;

li {
  display: inline-block;
  padding: 0.85rem 1rem;
  color: #1f2022;
Js Code
new Vue({
  el: '.container',
  data: function data() {
    return {
      users: [],
      errors: [],
      show: true

  mounted: function mounted() {

  methods: {
    getUsers: function getUsers() {
      var _this = this;

      axios.get('https://randomuser.me/api/?results=3').then(function (response) {
        _this.users = response.data.results;
      }).catch(function (e) {

  filters: {
    capitalize: function capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);