Press "Enter" to skip to content

jQuery-based Tooltip On Hover Component | stip

jQuery-based tip component is a simple and lightweight requirement that is a highly configurable and proprietary tooltips plugin via JavaScript and CSS.

jquery tooltip on hover example, bootstrap tooltip, jquery tooltip with html content, jquery tooltip library, tooltipster, javascript tooltip on hover

How to make use of it:

1. Load the jQuery library and the jQuery definitely plugin into the webpage.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="stip.js"></script>

2. The plugin will automatically read tooltip content from your element’s msg/title/info attributes.

<div class="stip" msg="This is a basic tooltip">
  Position: bottom
</div>

<div class="stip_right btn" msg="This is a basic tooltip">
  Position: right
</div>

3. Basic CSS styles for a tooltip.

.u-pop {
  position: absolute;
  z-index: 1000;
  min-width: 50px;
}

.u-pop-bd {
  background: #FFF;
  padding: 10px;
  border: 1px solid #D18D50;
  text-align: center;
}

.u-pop .arrowOut {
  border-color: #D18D50 transparent;
  border-style: solid;
  _border-style: solid dashed;
  height: 0;
  line-height: 0;
  width: 0;
  font-size: 0;
  border-width: 0 6px 6px 6px;
  _border-width: 0 7px 7px 7px;
  position: absolute;
  z-index: 11;
  top: -6px;
  left: 30px;
  display: block;
  _display: inline;
  zoom: 1;
}

.u-pop .arrowIn {
  border-color: #FFF transparent;
  border-style: solid;
  _border-style: solid dashed;
  display: block;
  _display: inline;
  height: 0;
  font-size: 0;
  line-height: 0;
  width: 0;
  border-width: 0 6px 6px 6px;
  _border-width: 0 7px 7px 7px;
  position: absolute;
  z-index: 12;
  left: 30px;
  top: -5px;
  zoom: 1;
  background: none\9;
}

.u-pop-loc-r .arrowOut {
  border-color: transparent #D18D50;
  _border-style: dashed solid;
  border-width: 6px 6px 6px 0;
  _border-width: 7px 7px 7px 0;
  left: -6px;
  top: 20px;
}

.u-pop-loc-r .arrowIn {
  border-color: transparent #FFF;
  _border-style: dashed solid;
  border-width: 6px 6px 6px 0;
  _border-width: 7px 7px 7px 0;
  left: -5px;
  top: 20px;
}

4. Call the plugin.

$(function(){
  $('.stip').stip();
  $('.stip_right').stip({ loc: 'r' });
})

5. Configuration options.

$('.stip').stip({
  
  // additonal CSS class appneded to the tooltip
  exCss: '',

  // custom position
  enPos: true,

  // CSS class for tooltip wrapper
  wraperCss: 'u-pop',

  // CSS class for tooltip content
  contentCss: 'u-pop-bd',

  // Selector for tooltip template
  tplSelector: null, 

  // Custom tooltip template
  tpl: '',

  // (b)ottom, (t)op, (r)ight, (l)eft
  loc: 'b',

  // addional CSS ID for the tooltip
  idFlag: '',

  // tooltip content
  msg: '',

  // min / max width of the tooltip
  minWidth: null,
  maxWidth: null,

  // width of the tooltip
  width: 'auto',

  // z-index property
  zIndex: 1000,

  // x offset
  ox: 0,

  // y offset
  oy: 0,

  // callbacks
  initFn: null,
  beforeShowFn: null,
  showFn: null,
  hideFn: null,

  // hover delay in ms
  timeout: 200

});

basic customizable jquery tooltip, dot Plugin/Github


See Demo And Download

Official Website(esky): Click Here

This superior jQuery/javascript plugin is developed by esky. For extra advanced usage, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published. Required fields are marked *