JSFiddle - React, Tailwind, and code Playground

by mozillazg

HTML

<script src="http://static.alipayobjects.com/seajs/seajs/2.1.1/sea.js"></script>
<script src="http://static.alipayobjects.com/seajs/seajs-style/1.0.0/seajs-style.js"></script>
<link rel="stylesheet" href="http://static.alipayobjects.com/alice/one/1.1.0/one.css">
<a class="tooltip" data-title="abc..." id="pop">abc</a>

CSS

a {
    display: inline-block;
    margin: 100px;
}

JavaScript

seajs.config({
        base: "http://static.alipayobjects.com/",
        alias: {
          "$": "jquery/jquery/1.9.1/jquery.js",
          "dialog": "arale/dialog/1.2.1/dialog.js",
          "confirmbox": "arale/dialog/1.2.1/confirmbox.js",
          "widget": "arale/widget/1.1.1/widget.js",
          "validator": "arale/validator/0.9.7/validator.js",
          "validator-core": "arale/validator/0.9.7/core.js",
          "popup": "arale/popup/1.1.3/popup.js",
          "tabs": "arale/switchable/1.0.0/tabs.js",
          "tip": "arale/tip/1.2.1/tip.js"
        }
      });

function pop() {
  seajs.use(['tip', '$'], function(Tip, $) {
    var t = new Tip({
        trigger: '.tooltip'
    });
    t.before('show', function() {
        this.set('content', this.activeTrigger.attr('data-title'));
    });
  });
}
pop();

seajs.use(['confirmbox'], function(ConfirmBox) {
    msg = '<span class="tooltip" data-title="tooltip" >tooltip</span>';
    var cb = new ConfirmBox({
        trigger: '#pop',
        title: '我真是标题啊',
        message: msg,
        confirmTpl: '<button>确定</button>',
        cancelTpl: '<button>取消</button>'
    });
});