Twitter Bootstrap 툴팁 너비

Question

더 큰 너비로 툴팁을 만들려고합니다.

이것은 내가 가지고있는 것입니다.

HTML

<div class="container hidden-sm hidden-xs"> 
<hr> 
    <ul class="nav nav-pills dropup"> 
       <li class="pull-left"><a href="https://www.facebook.com/Sander0542/" target="_blank"><i class="fa fa-facebook"></i></a></li> 
       <li class="pull-left"><a href="https://twitter.com/Sander0542/" target="_blank"><i class="fa fa-twitter"></i></a></li> 
       <li class="pull-left"><a href="https://www.instagram.com/sander0542/" target="_blank"><i class="fa fa-instagram"></i></a></li> 
       <li class="pull-left"><a href="https://www.snapchat.com/add/Sander0542/" target="_blank"><i class="fa fa-snapchat-ghost"></i></a></li> 
       <li class="pull-left"><a href="https://plus.google.com/u/0/+SanderJochems0542" target="_blank"><i class="fa fa-google-plus"></i></a></li> 
       <li class="pull-left"><a href="https://www.youtube.com/channel/UCDn9R9Rclc0KVkft_0FewMA" target="_blank"><i class="fa fa-youtube-play"></i></a></li> 
       <li class="pull-right"><a href="/contact"><?php echo $footer["contact"]; ?></a></li> 
       <li class="dropdown pull-right"> 
       <a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false">© Sander Jochems <?php echo date("Y"); ?></a> 
       <ul class="dropdown-menu"> 
       <li><a href="/sitemap"><?php echo $footer[sitemap]; ?></a></li> 
       <li><a href="/privacy"><?php echo $footer[privacy_policy]; ?></a></li> 
       </ul> 
       </li> 
       <li class="pull-right"><a href="#" data-toggle="modal" data-target="#language"><?php echo $footer["language"]; ?></a></li> 
       <li class="pull-right"><a><i class="fa fa-tachometer fa-fw" data-toggle="tooltip" title="<?php echo $footer["visitor"]; echo $total_hits; ?>"></i></a></li> 
    </ul><br> 

jQuery를

$(document).ready(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
}); 

CSS :이 폭으로

.tooltip-inner { 
    min-width: 100px; 
    max-width: 100%; 
} 

늘 더 큰합니다.

Answer 1

기본값 인 최대 너비 (툴팁 기준)을 원하는 값으로 대체하십시오.

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

.tooltip-inner { 
 
    max-width: 150px !important; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> 
 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<br /> 
 
<br /> 
 
<li class="pull-right"><a><i class="fa fa-tachometer fa-fw" data-toggle="tooltip" data-placement="left" title="I'am trying to make a tooltip with a bigger width."></i></a></li>

_{참고 : 포함 된 요소가 최대 폭, 다음 는 최대 폭이 작동하지 않습니다보다 작은합니다. 이를 추가하여 몸에 툴팁을 추가 할 필요가있다이 경우}

:

data-container="body" 

나는 희망이 도움이 .. 감사합니다