以下示例均使用样式：

.cell {
    overflow:hidden;
    margin-bottom:20px;
    zoom:1;
}
.cell p {
    display:inline-block;
    padding:10px;
    margin-right: 5px;
    background-color:#FFCB88;
    border-radius: 4px;
    cursor: pointer;
    overflow:hidden;
}
.cell p:hover {
    background-color:#FFB556;
}

箭头位置¶

箭头在 top left 位置

<div class="cell">
    <p id="topleft">箭头在 top left 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#topleft',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'top left'
});

箭头在 top 位置

<div class="cell">
    <p id="top">箭头在 top 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#top',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'top'
});

箭头在 top right 位置

<div class="cell">
    <p id="topright">箭头在 top right 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#topright',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'top right'
});

箭头在 bottom left 位置

<div class="cell">
    <p id="bottomleft">箭头在 bottom left 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#bottomleft',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'bottom left'
});

箭头在 bottom 位置

<div class="cell">
    <p id="bottom">箭头在 bottom 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#bottom',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'bottom'
});

箭头在 bottom right 位置

<div class="cell">
    <p id="bottomright">箭头在 bottom right 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#bottomright',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'bottom right'
});

箭头在 left top 位置

<div class="cell">
    <p id="lefttop">箭头在 left top 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#lefttop',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'left top'
});

箭头在 left 位置

<div class="cell">
    <p id="left">箭头在 left 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#left',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'left'
});

箭头在 left bottom 位置

<div class="cell">
    <p id="leftbottom">箭头在 left bottom 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#leftbottom',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'left bottom'
});

箭头在 right top 位置

<div class="cell">
    <p id="righttop">箭头在 right top 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#righttop',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'right top'
});

箭头在 right 位置

<div class="cell">
    <p id="right">箭头在 right 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#right',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'right'
});

箭头在 right bottom 位置

<div class="cell">
    <p id="rightbottom">箭头在 right bottom 位置</p>
</div>

var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#rightbottom',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    tipPosition: 'right bottom'
});

自定义位置¶

利用 align 属性设置自定义位置

<div class="cell">
    <p id="test11">利用 align 属性设置自定义位置</p>
</div>


var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '#test11',
    content: '<div style="padding:10px">我是内容 我是内容</div>',
    align: {
        baseXY: [0, 0],
        selfXY: [0, '100%+8px']
    }
});

动态 content¶

动态获取

trigger 的属性

<div class="cell">
    <p class="test12">动态获取</p>
    <p class="test12">trigger 的属性</p>
</div>


var Poptip = FNX.include('combobox/poptip');

var t = new Poptip({
    trigger: '.test12'
});
t.before('show', function() {
    this.set('content', this.activeTrigger.html());
});

Poptip 示例

箭头位置¶

自定义位置¶

动态 content¶