Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
    <div class="demo">
    <h3>使用说明</h3>
<code><pre>
    $(selector).stip( ops ); //直接绑定
    或
    $.stip(target, ops); //代理模式
    $.stip.hide(); //关闭所有tip
​
</pre></code>
      <h3>配置参数</h3>
<code><pre>
 *  exCss : 额外追加的css样式
 *  wraperCss : 重新指定外围样式
 *  contentCss : 重新指定内容域样式
 *  tplSelector : 指定页面已经存在的模板标识(id或类名)
 *  tpl : 指定自定义的模板字符串，注意：tplSelector优先
 *  loc : 提示位置，'b'位于目标下方[默认],'r'右侧
 *  enPos : 默认使用组件计算定位，否则使用tplSelector的样式信息或在showFn中自己定位。
 *  idFlag : 额外的id标记，默认为空，若不想与别的tip公用dom则可追加id标记
 *  msg : 指定内容区显示的消息文本
 *  beforeShowFn : 由显示回调函数负责渲染内容区，若使用则msg无效
 *  showFn : 显示且定位后的回调函数
 *  hideFn : 隐藏时的回调函数
 *  initFn : 初始化回调函数，只执行一次
 *  width : 固定宽度 默认auto
 *  minWidth : 最新宽度
 *  maxWidth : 最大宽度
 *  ox : x轴偏移量
 *  oy : y轴偏移量
 *  timeout : hover延迟时间
</pre></code>
  </div>
  <div class="demo demo01">
    <h3>示例01：不使用组件定位</h3>
<code><pre>
      不使用组件定位 enPos=0
      使用自定义的tip,需指明目标id tip="#J_demo01"
      .demo01 .tartTip{ left: 50px; bottom: -52px;}
</pre></code>
    <div class="stip_demo01 btn" tip="#J_demo01" enPos=0>鼠标划入显示</div>
    <div class="tartTip" id="J_demo01">
      <i class="arrowSideline"></i>
      <i class="arrowIcon"></i>
      <div class="tartTipBody">
        <code>
          不使用组件定位 enPos=0<br>
          .demo01 .tartTip{ left: 50px; bottom: -52px;}
        </code>
      </div>
    </div>
  </div>
  <div class="demo demo02">
    <h3>示例02: 简易使用</h3>
    <code>
      使用 msg/title/info 显示默认tip<br>
    </code>
    <div class="stip btn" msg="这是一个使用组件默认tip的例子" >默认居下</div>
    <div class="stip_right btn" msg="居右的tip的例子" >居右的tip</div>
  </div>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers