当textsize很大时,工具提示不会在css中显示

时间:2017-06-12 06:40:55

标签: html css

  <a class="ctooltip" tooltip="Definition:1000 characters here 
  onclick="openDocumentTypeHistory(2110)" href="#" >mytestdocument</a>

CSS样式函数

.ctooltip{
        display: inline;
        position: relative;
    }
                  .ctooltip:hover:after{
        background: #F5F5F5;
        border-radius: 2px;
            border-color: #000000;
            border-style: ridge;
            border-width: 1px;
            top: 26px;
            text-decoration: none;
        color: #1d3030; 
        left: 20%;
            content: attr(tooltip);
        padding: 5px 15px;
             position: absolute;
        z-index: 98;
            width: 220px;
           max-width: 220px;
    }
           a:hover {text-decoration: none; }
  

当文字大小很大时,我无法显示整个工具提示信息(超过1000个字符,我该如何解决这个问题?

1 个答案:

答案 0 :(得分:0)

这是一个具有长工具提示值的示例:

<a href="#" rel="tooltip" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum ac felis id commodo. Etiam mauris purus, fringilla id tempus in, mollis vel orci. Duis ultricies at erat eget iaculis.">Hover here please</a>

<强> JS

$(document).ready(function () {
   $("a").tooltip({
    'selector': '',
    'placement': 'top',
    'container':'body'
   });
});

<强> CSS

div.tooltip-inner {
   max-width: 350px;
}