vue div里面 套iview 的 Tooltip 文字

先看效果图吧：

 方法一：

具体代码如下：

                <div class="positions">
                    <div v-for="(item,index) in positions" :key="index">
                        <div id="act_point"
                            v-if="lines.line.lineId === item.lineId"
                            :style="{left: item.left + 'px', bottom: item.bottom + 'px'}"
                            :class="{'bg1':item.flag == true,'bg2':item.flag == false }"
                            >
                            <!-- 标题文字 -->
                            <Tooltip placement="top-end">
                                <div style="width:60px; height:22px;"></div>
                                <div slot="content">
                                    <p>{{'线路Id：' + item.lineId}}</p>
                                    <p>{{'列车编号：' + item.trainId }}</p>
                                    <p>{{'车站Id：' + item.stationBId}}</p>
                                    <p>{{'到达时间：' + item.time}}</p>
                                </div>    
                            </Tooltip>
                        </div>
                    </div>
                </div>

方法二：

Tooltip 是iview中的文字提示，好用

采坑的是

1、当父元素 col 宽度固定

2、p标签文本溢出隐藏

3、加上Tooltip文字提示，这时候第二部中的文本溢出隐藏就不起作用了，需要给p一个最大宽度的限制

max-width: 110px;

最后为了方便大家的沟通与交流请加QQ群： 625787746

请进QQ群交流：【IT博客技术分享群①】：https://jq.qq.com/?_wv=1027&k=DceI0140