工具提示在我的div外

我的工具提示位于我的容器外部，我可以看到我的工具提示被删除。我想让我的工具提示位于容器外部，以便它完全可见。工具提示在我的div外

我试图改变z-index，溢出等。但是，没有任何反应。我需要你的帮助！

$('[data-toggle="tooltip"]').tooltip() 
 
$(".nano").nanoScroller();

/** initial setup **/ 
 
.nano { 
 
    position : relative; 
 
    width : 200px; 
 
    height : 150px; 
 
    overflow : hidden; 
 
    
 
} 
 
.action{ 
 
    width:100%; 
 
    height:35px 
 
} 
 
.nano > .nano-content { 
 
    position  : absolute; 
 
    overflow  : scroll; 
 
    overflow-x : hidden; 
 
    top   : 0; 
 
    right   : 0; 
 
    bottom  : 0; 
 
    left   : 0; 
 
    border : 1px solid red; 
 
} 
 
.nano > .nano-content:focus { 
 
    outline: thin dotted; 
 
} 
 
.nano > .nano-content::-webkit-scrollbar { 
 
    display: none; 
 
} 
 
.has-scrollbar > .nano-content::-webkit-scrollbar { 
 
    display: block; 
 
} 
 
.nano > .nano-pane { 
 
    background : rgba(0,0,0,.25); 
 
    position : absolute; 
 
    width  : 10px; 
 
    right  : 0; 
 
    top  : 0; 
 
    bottom  : 0; 
 
    visibility : hidden\9; /* Target only IE7 and IE8 with this hack */ 
 
    opacity : .01; 
 
    -webkit-transition : .2s; 
 
    -moz-transition  : .2s; 
 
    -o-transition   : .2s; 
 
    transition   : .2s; 
 
    -moz-border-radius : 5px; 
 
    -webkit-border-radius : 5px; 
 
    border-radius   : 5px; 
 
} 
 
.nano > .nano-pane > .nano-slider { 
 
    background: #444; 
 
    background: rgba(0,0,0,.5); 
 
    position    : relative; 
 
    margin    : 0 1px; 
 
    -moz-border-radius : 3px; 
 
    -webkit-border-radius : 3px; 
 
    border-radius   : 3px; 
 
} 
 
.nano:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed { 
 
    visibility : visible\9; /* Target only IE7 and IE8 with this hack */ 
 
    opacity : 0.99; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdn.rawgit.com/jamesflorentino/nanoScrollerJS/master/bin/javascripts/jquery.nanoscroller.js"></script> 
 

 
<div style="position: relative; left:100px;"> 
 
<div id="about" class="nano"> 
 
    <div class="nano-content"> 
 
    <ul class="list-first-steps"> 
 
     <li> 
 
      <div data-toggle="tooltip" data-placement="left" title="Tooltip on left"class="action">aaaaaaa</div> 
 
     </li> 
 
     <li> 
 
      <div data-toggle="tooltip" data-placement="left" title="Tooltip on left"class="action">bbbbbbb</div> 
 
     </li> 
 
     <li> 
 
      <div data-toggle="tooltip" data-placement="left" title="Tooltip on left"class="action">ccccccc</div> 
 
     </li> 
 
     <li> 
 
      <div data-toggle="tooltip" data-placement="left" title="Tooltip on left"class="action">vvvvvvvv</div> 
 
     </li> 
 
     <li> 
 
      <div data-toggle="tooltip" data-placement="left" title="Tooltip on left"class="action">ddddddd</div> 
 
     </li> 
 
     <li> 
 
      <div class="action">aaaaaaa</div> 
 
     </li> 
 
     <li> 
 
      <div class="action">eeeeeeeee</div> 
 
     </li> 
 
     <li> 
 
      <div class="action">wwwwww</div> 
 
     </li> 
 
     <li> 
 
      <div class="action">eeerr</div> 
 
     </li> 
 
     <li> 
 
      <div class="action">errrrtte</div> 
 
     </li> 
 
    </ul> 
 
</div> 
 
</div>

来源

2015-04-22 Kappys

对不起，我解决了这个问题....

我初始化工具提示在javascript：

$('[data-toggle="tooltip"]').tooltip({container: 'body'})

当我包括container:body，I c一个查看所有工具提示。很抱歉的问题，我希望我可以帮助大家：P

编辑： Jsfiddle answer

来源

2015-04-22 20:16:33 Kappys

工具提示在我的div外

回答

相关问题