引導，下拉工具提示，在按鈕組中似乎有影響

在引導中，帶下拉的工具提示時，懸停數據切換附加到按鈕組中的一個按鈕似乎有效果，當我將鼠標懸停在按鈕上時負責工具提示，然後調整它看起來不太好的位置。請幫幫我。引導，下拉工具提示，在按鈕組中似乎有影響

這裏是我的代碼： -

<html> 
<head> 
<meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <link href="css/bootstrap.css" rel="stylesheet" media="screen"/> 
    <link href="css/bootstrap-responsive.css" rel="stylesheet" media="screen"/> 
</head> 
<body> 
    <div class="btn-group"> 
     <a href="#" class="btn btn-small btn-inverse add1" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Selected Contacts">Add</a> 
     <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> 
      <span class="caret"></span> 
     </a> 
<a href="#" class="btn btn-small btn-inverse add1" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Add to Selected Contacts">Add</a> 
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> 
      <span class="caret"></span> 
    </a> 
</div>            
<script type="text/javascript" src="js/jQuery v1.9.1.js"></script> 
    <script type="text/javascript" src="js/bootstrap.js"></script> 
    <script type="text/javascript"> 
    // tooltip demo 
    $('.add1').tooltip() 
    </script>        
</body> 
</html>

來源

2013-08-28 gaurav

嘗試添加container: 'body'選項。這會將工具提示附加到身體上，而不是放在按鈕容器中。

$('.add1').tooltip({ 
    container: 'body' 
})

來源

2013-08-28 16:00:26 Schmalzy

非常感謝你。 – gaurav

你先生太棒了。謝謝。 – Gavin

這是實現它的關鍵 –

不需要JavaScript代碼。

只需在切換工具提示的錨點元素上添加下面的屬性即可。

data-container="body"

在你的代碼，它是這樣，

<div class="btn-group"> 
     <a href="#" class="btn btn-small btn-inverse add1" data-toggle="tooltip" data-container="body" data-placement="bottom" title="" data-original-title="Add to Selected Contacts">Add</a> 
     <a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> 
      <span class="caret"></span> 
     </a> 
<a href="#" class="btn btn-small btn-inverse add1" data-toggle="tooltip" data-container="body" data-placement="bottom" title="" data-original-title="Add to Selected Contacts">Add</a> 
<a class="btn btn-inverse dropdown-toggle" data-toggle="dropdown" href="#"> 
      <span class="caret"></span> 
    </a> 
</div>

來源

2017-04-10 12:32:09

引導，下拉工具提示，在按鈕組中似乎有影響

回答

相關問題