如何创建一个提示？如何创建一个提示？(How to create a tooltip?)

我想打一个自定义的CSS类工具提示，将包长度大于25-30.Usually多串这么长的文本不适合进入tootltip文本区域。

而且反正是有做到这一点使用工具提示（ui.bootstrap.tooltip）？像使用自定义的CSS类来获得所需的输出。

这是简单的CSS工具提示- Plunker DEMO

下面是相同的代码片段：

 .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>

Answer 1:

CSS的解决方案

有一个很简单的解决手头的问题。我必须添加如下CSS代码

word-wrap:break-word;

对于环绕你的提示文本类。

这是一个工作演示

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

如果我使用什么角度UI？

对于造型从角UI工具提示，我添加tooltip-class="tooltip"到工具提示的代码。

这里是一个有角工作演示

这是从获得的改性plunkr 角UI文档

Answer 2:

这里是引导定制的工具提示的完整代码

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script>
   $(document).ready(function(){
    $("[data-toggle=tooltip]").tooltip();
});


  </script>
  <style>
  .tooltip.top .tooltip-inner {
    background-color:red;
  }
.tooltip.top .tooltip-arrow {
          border-top-color: red;
       }
.tooltip.right .tooltip-inner {
    background-color:blue;
  }
.tooltip.right .tooltip-arrow {
          border-right-color: blue;
       }
.tooltip.bottom .tooltip-inner {
    background-color:green;
    width:400px;
    height:50px;
    padding-top:10px;
  }
.tooltip.bottom .tooltip-arrow {
          border-bottom-color: green;
       }  
.tooltip.left .tooltip-inner {
    background-color:yellow;
  }
.tooltip.left .tooltip-arrow {
          border-left-color: yellow;
       }                    
  </style>
</head>
<body>

   <div class="container">
  <div class="row">
    <div class="col-sm-12">
        <h1>Colored Tooltip</h1>
    </div>
    <div class="col-sm-3">
      <h3>Top</h3>
        <a href="#" data-toggle="tooltip" title="This tooltip is on top!">Hover to see my tooltip</a>
    </div>
    <div class="col-sm-3">
      <h3>Right</h3>
        <a href="#" data-placement="right" data-toggle="tooltip" title="This tooltip is on the right!">Hover to see my tooltip</a>
    </div>
    <div class="col-sm-3">
      <h3>Bottom</h3>
        <a href="#" data-placement="bottom" data-toggle="tooltip" title="This tooltip is on the bottom!">Hover to see my tooltip</a>
    </div>
    <div class="col-sm-3">
      <h3>Left</h3>
        <a href="#" data-placement="left" data-toggle="tooltip" title="This tooltip is on the left!">Hover to see my tooltip</a>
    </div>
  </div>
</div>
</body>
</html>

Answer 3:

您可以创建一个使用一些CSS技巧，这将根据内容调整大小的提示。

下面是一些示例宽度和高度的假设。

.tooltip{
    max-width:100px;
    padding:15px;
    min-height:30px;
    background:#000;/*change accordingly*/
}

上面提到的CSS将创建修复最大宽度和高度调整大小，将适合你的内容股利。

文章来源: How to create a tooltip?

如何创建一个提示？如何创建一个提示？(How to create a tooltip?)

Answer 1:

Answer 2:

Answer 3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮