美文网首页
你真的会写toolTip吗

你真的会写toolTip吗

作者: 落崖惊风yxy | 来源:发表于2021-02-01 23:55 被阅读0次

你的tooltip一般都是怎么写的呢?例如实现类似下图的效果(wps word文档 的 tooltip):当鼠标移出icon的时候显示一段工具提示文本,当鼠标移出工具提示文本消失。


wps-word的tooltip.png

一些小伙伴可能“不加思索”的就有想法了:父元素里包含两个兄弟元素,其一就是这个icon,其二就是它的工具提示文本;在父元素上设置鼠标移入、移出来实现交互就OK了。实例如下:

<body>
   <div id="icon-box">
       <i class="icon" id="icon">B</i>
       <span class="text" id="text" style="display: none;">将所选内容字体加粗</span>
    </div>  
</body>
<script>
    var  iconBox=document.getElementById("icon-box")
    var  text=document.getElementById("text")
    iconBox.onmouseover=function(){
        text.style.display="block";
    }
    iconBox.onmouseout=function(){
        text.style.display="none";
    }
</script>

ok,这样当然可以实现效果啦。不过嘛~~~在这里,icon的父元素用的是div,宽和高都没有限制。只是对icon的大小做了限定(如下):

.icon{
            display: block;
            width: 24px;
            height: 24px;
            line-height: 24PX;
            text-align: center;
            border-radius: 45%;
            background-color: aqua;
            font-weight: bolder;
        }

然而实际情况中,icon的父级元素可能就比它大一点点,甚至是和它大小一致(如下):

 div{
            width: 24px;
            height: 24px;
        }

这个时候,tooltip的展示效果如何呢?看看下图吧:


限定父级元素的大小.png

吼吼吼~~~效果是不是超出预期啦?

有的小伙伴可能会说,那也难不住我呀,给tootip设置一下样式不就ok了。嗯,也对!如下:

 .text{
            width: 150px;
        }

ok,这样设置在这里确实OK了。

但是,tootip工具提示文本在实际情况中可是有长有短的哦。以中文来说,有的可能就是两个汉字,有的可能八九个汉字,工具栏一般都有很多项工具按钮,难道要一个个去设置吗?况且现在都是组件化开发了。如果以最大宽度去设置,文字长度最长的当然可以容纳下,那文字长度短的容器内岂不是要大片留白?这种效果恐怕自己都得尴尬死!!

还有两点需要提醒一下:
1、工具提示文本的边框也还没有设置;
2、如果该工具按钮上还有onclick事件,onmouseover还会和它冲突哦,但很不幸的是,实际情况中就是有onclick事件。

唉,是不是头都要大了?一个小小的tooltip竟然搞这么大了

其实呀,html有一个全局属性title可以帮你轻松又简单的实现哦
https://www.runoob.com/tags/att-global-title.html

<div id="icon-box">
       <i class="icon" id="icon" title="将所选内容字体加粗">B</i>
    </div>

回头再看之前的那些操作,是不是如此设置更简单省力!

相关文章

  • 你真的会写toolTip吗

    你的tooltip一般都是怎么写的呢?例如实现类似下图的效果(wps word文档 的 tooltip):当鼠标移...

  • 二分查找代码实现

    from 你真的会写二分查找吗?

  • [iOS] Podfile 多 target 的配置

    使用 ruby语法 相关文章 你真的会写Podfile吗?

  • 你真的会写java吗?

    文章核心 其实,本不想把标题写的那么恐怖,只是发现很多人干了几年java以后,都自认为是一个不错的java程序员了...

  • 你真的会写JAVA吗?

    文章核心 其实,本不想把标题写的那么恐怖,只是发现很多人干了几年java以后,都自认为是一个不错的java程序员了...

  • 你真的会写代码吗?

    《编写可读代码的艺术》这本书我想程序猿都很熟悉吧。平时不怎么读书的我也是心血来潮将这本书通读了一遍,果然是大师写的...

  • 你真的会写邮件吗?

    作为现代职场的office人员,每天一上班,电脑开机后的第一件事就是——打开邮箱! 我们每天面对电脑8-12个小时...

  • 你真的会写Podfile吗?

    前言 iOS开发会经常用到cocoapods管理第三方,简单、方便、高效。如何集成cocoapods在cocoap...

  • 你真的会写作吗

    你真的会写作吗?这对于初学者来说是一个需要考虑的问题。有的人说我会,我可以稍加思索,千字长文一挥而就。有的人...

  • 你真的会写作吗?

    写作能力的三个核心是什么? 写作能力是什么?很简单,写作能力就是文字表达能力。 错,若是你这样理解,可能你一辈子都...

网友评论

      本文标题:你真的会写toolTip吗

      本文链接:https://www.haomeiwen.com/subject/kkostltx.html