jQuery PlugIns

qTip

qTip Styles

demo 01

body content with a qTip css class

demo 02

body and header content with a qTip CSS class

demo 03

body and header content with a jquery ui-theme

demo 04

body and header content with a jquery ui-theme

demo 05

with "title" and "alt" as attributes

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>qTip</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/eggplant/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/qtip2/3.0.3/basic/jquery.qtip.min.js"></script>
<style type="text/css">
  <!--
  .demo-qtip-container {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 auto;
  width: 540px;
  border: 1px solid #ccc;
  padding: 1em;
  }
.demo-qtip-container h1 {
  background:#f0f0f0;
  padding: 10px 20px;
  font-size: 14px;
  }
.demo-qtip-container table td {
  height: 50px;
  vertical-align: center;
  padding: 2px 8px;
  background: #f0f0f0;
  } 
.demo-qtip-01 {
  color: #f90;
  border-bottom: 1px dotted #f90; 
  }
.demo-qtip-02 {
  color: #c00;
  border-bottom: 1px dotted #c00; 
  }
.demo-qtip-03 {
  color: #039;
  border-bottom: 1px dotted #039; 
  }
.demo-qtip-04 {
  color: #363;
  border-bottom: 1px dotted #363; 
  }
.demo-qtip-05 {
  color: #333;
  border-bottom: 1px dotted #363; 
  }
  .clear {
  clear:both;
  }
  -->
  </style>
<script type="text/javascript">
  $(document).ready(function() {
  $(".demo-qtip-01").qtip({
  content: {
  text: "Demo 01 - Body content",
  },
  position: {
  my: "top left",
  at: "bottom left"
  },
  style: {
  classes: 'qtip-bootstrap'
  }
  });
  });
  </script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".demo-qtip-02").qtip({
  content: {
  text: "Demo 02 - Body content",
  title: {
  text: "Demo 02 - Title"
  }
  },
  position: {
  my: "top left",
  at: "bottom left"
  },
  style: {
  classes: 'qtip-bootstrap'
  }
  });
  });
  </script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".demo-qtip-03").qtip({
  content: {
  text: "Demo 03 - Body content",
  title: {
  text: "Demo 03 - Title"
  }
  },
  position: {
  my: "top right",
  at: "bottom left"
  },
  style: {
  widget: true,
  def: false
  }
  });
  });
  </script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".demo-qtip-04").qtip({
  content: {
  text: "Demo with ui-theme and close button",
  title: {
  text: "Demo 04",
  button: true
  }
  },
  position: {
  my: "top right",
  at: "bottom left"
  },
  style: {
  widget: true,
  def: false
  },
  show: {
  button: true,
  delay: 350,
  solo: true
  },
  hide: {
  event: "mouseleave",
  leave: true,
  fixed: true,
  delay: 750
  }
  });
  });
  </script>
<script type="text/javascript">
  $(document).ready(function() {
  $(".demo-qtip-05").qtip({
  content: {
  text: $(this).attr('[title]'),
  title: function(event, api) {
  return $(this).attr('alt');
  }
  },
  position: {
  my: "top right",
  at: "bottom left"
  },
  style: {
  widget: true,
  def: false
  },
  show: {
  button: true,
  delay: 350,
  solo: true
  },
  hide: {
  event: "mouseleave",
  leave: true,
  fixed: true,
  delay: 750
  }
  });
  });
  </script>
  </head>
  <body>
  <div class="demo-qtip-container">
  <h1>qTip styles: </h1>
  <table width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
  <td><span class="demo-qtip-01">Demo 01</span></td>
  <td>body content with a qTip css class</td>
  </tr>
  <tr>
  <td><span class="demo-qtip-02">Demo 02</span></td>
  <td>body and header content with a qTip CSS class</td>
  </tr>
  <tr>
  <td><span class="demo-qtip-03">demo 03</span></td>
  <td>body and header content with a jquery ui-theme</td>
  </tr>
  <tr>
  <td><span class="demo-qtip-04">demo 04</span></td>
  <td>body and header content with a close button</td>
  </tr>
  <tr>
  <td><span class="demo-qtip-05" title="Title Content" alt="Alt Content">demo 05</span></td>
  <td>same as demo 03, but uses elements "title" and "alt" attribute</td>
  </tr>
  </table>
  <div class="clear"></div>
  </div>
  </body>
  </html>