zoukankan      html  css  js  c++  java
  • bootstrap ----tooltip

    bootstrap4 和 jqery3.2.1版本共同使用时, 使用tooltip组件会有兼容问题

     

    解决方法:

    需要引入另一个js

    <script src="js/jquery-3.2.1.min.js" type="text/javascript"></script>
    <script src="js/popper.min.js" type="text/javascript"></script> //而且必须在bootstrap之前引入
    <script src="js/bootstrap.min.js" type="text/javascript"></script>

    提示内容动态设置关键:title属性值为td的内容

    eg.    

     <tr>
                                                <td><img src="image/index_page/hy002.png"
                                                         class="img-fluid message_header"></td>
                                                <td>Doe</td>
                                                <td>@信件内容信件内容信件内容信件内容信件内容信件内容信件内容</td>
                                                <td>2020-05-02 15:30:36</td>
                                            </tr>
    $(function () {/*tooltip*/
            tooltipFn();
            $('[data-toggle="tooltip"]').tooltip();
        });
    
        function tooltipFn() {
            $('.table tr td').each(function () {
                $(this).attr('data-toggle','tooltip');
                $(this).attr('data-placement','top');
                $(this).attr("title", $(this).text()); // 动态设置内容为当前title的值
                $(this).css("cursor",'pointer');
            });
        }

    效果:

     

    补充:tooltip样式修改(以tooltip在top方向提示为例)

    bootstrap 3

    .tooltip.top .tooltip-inner {
        background-color:red;
    }
    .tooltip.top .tooltip-arrow {
          border-top-color: red;
    }

    bootstrap4

    .bs-tooltip-top .tooltip-inner {
        background-color: red;
    }
    
    .bs-tooltip-top .arrow::before {
        border-top-color: red;
    }
  • 相关阅读:
    静态数组和动态数组
    C#实现两个时间相减的方法
    360安全卫士为什么无法登录用户,显示网络失败,请检查网络,可是网络连接正常。
    WPS Word查询某些内容的出现次数
    安装安全狗后,MP4无法播放
    图片上传Security Error
    JS 构造图片Image对象
    c#截取图片
    VS2013快捷键
    WPS之替换样式
  • 原文地址:https://www.cnblogs.com/LindaBlog/p/13753390.html
Copyright © 2011-2022 走看看