qTip2 精致的基于jQuery提示信息插件

qTip2 精致的基于jQuery提示信息插件攻略

什么是qTip2插件

qTip2是一个非常流行的基于jQuery的提示信息插件。它提供了多种样式可以定制，可以在鼠标悬浮、鼠标点击、Focus等事件触发时展示提示信息。而且使用qTip2插件很简单易用，是很多网站开发者和设计师的首选。

接下来，我们将详细讲解qTip2插件的使用方法，包括如何安装、使用和自定义。

安装qTip2插件

要使用qTip2插件，需要先引入jQuery库文件和qTip2插件文件。可以使用CDN或者从官方网站（https://qtip2.com/）下载。

<!-- 引入jQuery库文件 -->
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<!-- 引入qTip2文件 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.css">
<script src="https://cdn.jsdelivr.net/qtip2/2.2.1/jquery.qtip.min.js"></script>

使用qTip2插件

qTip2的使用非常简单，只需要通过JavaScript代码即可。

<!-- HTML代码结构 -->
<div class="tooltip">这是一段需要提示的文本</div>

// JavaScript代码
$(function() {
  $('.tooltip').qtip({
    content: '这是提示信息' // 提示信息
  });
});

上面这个例子非常简单，只是展示了一个提示信息。接下来，我们将讲解如何设置不同样式、触发事件、使用HTML内容等功能。

设置样式

qTip2提供了各种样式可以自定义。在使用时，只需在JavaScript代码中添加style属性，指定样式即可。

// JavaScript代码
$(function() {
  $('.tooltip').qtip({
    content: '这是提示信息',
    style: {
      classes: 'qtip-shadow qtip-rounded' // qtip-shadow和qtip-rounded两种样式
    }
  });
});

触发事件

qTip2默认是在鼠标悬浮（mouseover）事件时触发提示信息。但是，它也支持多种触发方式，比如鼠标点击（click）、鼠标右键（contextmenu）、失去焦点（blur）等。

// JavaScript代码
$(function() {
  $('.tooltip').qtip({
    content: '这是提示信息',
    show: {
      event: 'click' // 鼠标点击事件
    }
  });
});

使用HTML内容

qTip2还支持使用HTML内容作为提示信息。只需要在JavaScript代码中添加content.title和content.text属性即可。

// JavaScript代码
$(function() {
  $('.tooltip').qtip({
    content: {
      title: '这是标题',
      text: '这是<em>HTML</em>内容' // 使用HTML内容
    },
    style: {
      classes: 'qtip-shadow qtip-rounded'
    }
  });
});

自定义qTip2插件

除了使用默认设置，qTip2还支持自定义设置。下面是两个例子。

Example 1: 表单验证

以下示例展示如何在表单输入框下方显示错误提示信息。

<!-- HTML代码结构 -->
<div class="form-group">
  <label for="username">用户名</label>
  <input type="text" class="form-control" id="username">
  <div class="help-block"></div>
</div>

// JavaScript代码
$(function() {
  $('#username').qtip({
    content: {
      text: '请输入正确的用户名。', // 错误提示信息
      title: {
        button: true
      }
    },
    position: {
      my: 'bottom center',
      at: 'top center',
      target: $('.form-group')
    },
    show: {
      ready: true,
      event: false
    },
    hide: {
      event: 'focus change',
      inactive: 2000
    },
    style: {
      classes: 'alert-danger qtip-rounded',
      tip: {
        corner: true,
        width: 20,
        height: 10
      }
    }
  });

  $('#username').on('change', function() {
    var username = $('#username').val().trim();
    if(username === '') {
      // 显示错误提示信息
      $('#username').qtip('show');
    } else {
      // 隐藏错误提示信息
      $('#username').qtip('hide');
    }
  });
});

Example 2: 悬浮时图片放大

以下示例展示如何在鼠标悬浮时放大图片。

<!-- HTML代码结构 -->
<div class="thumbnail">
  <img src="https://www.example.com/image.jpg">
  <div class="caption">
    <h3>标题</h3>
    <p>文字描述</p>
  </div>
</div>

// JavaScript代码
$(function() {
  $('.thumbnail').qtip({
    content: {
      text: function(event, api) {
        var img_url = $(this).find('img').attr('src');
        return '<img src="' + img_url + '">' // 返回HTML内容
      }
    },
    style: {
      classes: 'qtip-shadow qtip-rounded'
    },
    position: {
      target: 'mouse',
      adjust: {
        x: 10,
        y: 10
      }
    },
    show: {
      delay: 500
    },
    hide: {
      delay: 500
    },
    events: {
      render: function(event, api) {
        $(api.elements.content).find('img').on('load', function() {
          // 图片加载后，重新调整qTip2的大小
          api.set({
            'content.width': $(this).width(),
            'content.height': $(this).height()
          });
        });
      }
    }
  });
});

总结

qTip2是一个非常强大和灵活的提示信息插件，使用非常简单，只需要引入jQuery库和qTip2插件文件即可。它提供了各种样式、触发事件和HTML内容，还可以自定义设置，可以满足各种提示信息的需要。