zoukankan      html  css  js  c++  java
  • css版tooltip

    CSS样式:

    <style>
            .liuwttooltip {outline:none; }
            .liuwttooltip .title {line-height:30px;}
            .liuwttooltip .content {z-index:10;display:none; padding:14px 20px;margin-top:30px; margin-left:-100px;width:300px; line-height:16px;}
            .liuwttooltip:hover .content{display:inline; position:absolute; color:#111;border:1px solid #DCA; background:#fffAF0;}
            .liuwttooltip .content .callout {z-index:20;position:absolute;top:-12px;border:0;left:50px;}
            .liuwttooltip .content{border-radius:4px;box-shadow: 5px 5px 8px #CCC;}
            .liuwttooltip pre {white-space: pre-wrap;word-wrap: break-word;}
        </style>

    html结构

    <span class="liuwttooltip">
                显示内容
                <span class="content">
                    <img class="callout" src="data:image/gif;base64,R0lGODlhFgAMAKIAAAAAAP///9K8jv/68P///wAAAAAAAAAAACH5BAEAAAQALAAAAAAWAAwAAAMnSLrc/kwISJUYY1Z3cd6R52lbJ2IkZJ4otbItB8Mp8c7jcuP5zo8JADs=" />
                    <strong class="title">标题</strong><br/>
                    <pre>内容内容内容内容内容内容内容</pre>
                </span>
        </span>

    效果

  • 相关阅读:
    1767:字符合并
    成绩单
    floj 2264
    floj 2265 【lxs Contest #141】航海舰队
    CF932D Tree
    1745:分组
    1744:跳台阶
    Xamarin.Forms之跨平台性能
    Xamarin.Forms之部署和测试(性能)
    Xamarin.Forms数据绑定
  • 原文地址:https://www.cnblogs.com/liuwt365/p/8324983.html
Copyright © 2011-2022 走看看