更改bootstrap工具提示-tooltip

最新推荐文章于 2023-12-15 22:27:51 发布

is芳小芳

最新推荐文章于 2023-12-15 22:27:51 发布

阅读量291

点赞数

分类专栏：网页CSS #指定应用场景文章标签： bootstrap 前端 html

本文链接：https://blog.csdn.net/cspandadn/article/details/129006852

版权

网页CSS 同时被 2 个专栏收录

2 篇文章 0 订阅

订阅专栏

#指定应用场景

2 篇文章 0 订阅

订阅专栏

{# 引导添加客服 #}
        <div class="tooltip-inner-diybox">
          <div class='teacher-hover-diy' data-toggle="tooltip" data-placement="bottom"
            title='<p>相关问题请咨询客服</p><img alt="" src="{{ courseSet.assistantQrcode }}" /><p>{{ courseSet.customRemark }}</p>'>
            <i class="es-icon es-icon-qrcode"></i>
            {{ '更多信息添加客服新月咨询，请备注【控制规划】'|trans }}
          </div>
        </div>

//结构盒子
.tooltip-inner-diybox {
        //修改透明度的关键代码 start
        .tooltip.in {
          opacity: 1;
          filter: alpha(opacity=100);
        }
        //修改透明度的关键代码 end
        //元素
        .tooltip-inner {
          background: #ffffff !important;
          width: 170px;
          height: 170px;
          padding: 0 !important;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        }
         //提示的三角
        .tooltip-arrow {
          border-bottom-color: #ffffff !important;
          box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
        }
        //里面的图片
        .tooltip-inner img {
          display: block;
          width: 100px;
          height: 100px;
          margin: 2px auto;
        }
        //里面的段落
        .tooltip-inner p {
          font-size: 12px;
          color: #999999;
          text-align: center;
        }
      }