当前位置: 首页 > 面试题库 >

如何创建工具提示?

阎宾实
2023-03-14
问题内容

我想为工具提示创建一个自定义CSS类,该类将包裹长度超过25-30的字符串。通常这样长的文本不适合tootltip文本区域。

而且是否有使用[工具提示ui.bootstrap.tooltip)进行此操作?就像使用自定义CSS类来获取所需的输出。

这是简单的CSS工具提示

这是相同的代码片段:

.tooltip {

    position: relative;

    display: inline-block;

    border-bottom: 1px dotted black;

}



.tooltip .tooltiptext {



    max-width:100px;

    padding:15px;

    min-height:30px;

    background:#fff;

    visibility: hidden;

    border: 1px solid black;

    color: #000;

    text-align: center;

    border-radius: 6px;

    /* Position the tooltip */

    position: absolute;

    z-index: 1;

}



.tooltip:hover .tooltiptext {

    visibility: visible;

}


<body style="text-align:center;">



<p>Move the mouse over the text below:</p>



<div class="tooltip">Hover over me 1

  <span class="tooltiptext">Tooltip text</span>

</div>

<div class="tooltip">Hover over me 2

  <span class="tooltiptext">Array [1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,,1,11,1,1,1,11,1,,1,1,1,1,1,1,1,1,1,1,1,1,1,1]</span>

</div>

</body>

问题答案:

CSS解决方案

对于眼前的问题有一个非常简单的解决方案。我基本上添加的是以下CSS代码

word-wrap:break-word;

围绕您的工具提示文本的类。

此外,这是一个很好的阅读

如果我使用的是Angular UI,该怎么办?

为了从angular ui样式化工具提示,我添加tooltip-class="tooltip"了工具提示代码。



 类似资料:
  • 问题内容: 如何在SWT中为文本框创建气球工具提示? 问题答案: 这是修改后的SWT代码段,显示了如何将气球工具提示添加到SWT 实例。 下次,请考虑更具体地询问,我现在不这样做,如果您要查找的是..

  • 问题内容: 我经过漫长而艰苦的互联网搜索,没有找到直接的答案。我的问题很简单,我想在标记中添加以下内容: 编辑: 如果是包含我的数据对象的范围变化,并用模板,可能看起来像: 我想用范围为并显示为工具提示的范围编译该模板。据我对 模块的实验所知,将html注入工具提示的方法是使用指令,但是注入的html不会被编译,即,不对角表达式求值,不对指令进行扩展等。 我该如何为此创建指令?我想要一个精简的结果

  • 我正在开发(NASM GCC针对ELF64)一个PoC,它使用一个spectre小工具来测量访问一组缓存行(刷新重载)的时间。 如何制作可靠的幽灵小工具? 我相信我理解刷新重装技术背后的理论,然而在实践中,我鄙视一些噪音,我无法产生一个工作的概念验证。 由于我使用的是时间戳计数器,并且负载非常规则,因此我使用此脚本来禁用预取器,涡轮增压并修复/稳定CPU频率: 我有一个连续的缓冲区,在4KiB上对

  • 我为按钮设置了工具提示,但它看起来很小(字体大小),我如何使它更大?我试过,但它不起作用,为什么?我如何使字体更大?谢谢大家!

  • 关于 SING字形模板 字形是某种字体的字符的一种形式。字形模板是一个您可以自己创建的自定义字形,作为一个单独的文件存储。您可以创建字形模板以添加标准字符集中没有的字符、替换现有字符或作为现有字符的备用字形。例如,您可能需要添加别名、公司名称、公司徽标或不常使用的符号的字形。 创建和使用字形模板的工作流程 A. 在 Illustrator 中创建字形模板。 B. 将字形模板添加到 Adobe SI