如何将bootstrap工具提示放置设置为“右上角” [英] How to set bootstrap tooltip placement to "Top-right"

问题描述

您好，



如何将bootstrap工具提示放置设置为目标元素的右上角？目前，它只有顶部，底部，左侧，右侧选项。我试图在长宽文本框上显示工具提示，我需要显示工具提示到顶部严格并与目标控件右对齐（即工具提示的右端必须与控件的右端相同）。我找不到任何解决方案了。有没有高级插件可以达到这个目的？



请指教，

提前致谢

解决方案

包含这些文件
 
 <   pre     lang   =  xml > & lt; script src =& quot; bootstrap-tooltip.js& ; QUOT;&安培; GT;&安培; LT; /脚本&安培; GT; 
& lt; script src =& quot; bootstrap-tooltip-extension.js& quot;& gt;& lt; / script& gt; <   / pre  >  

。工具提示。 左上角。 tooltip-arrow  {
 底部 ：  -5px;  
  left  ：  5px;  
  border-width  ：  5px 5px 0;  
  border-top-color  ：  black;  
} 
。工具提示。右上角。 tooltip-arrow  {
  bottom  ：  -5px;  
  right  ：  5px;  
  border-width  ：  5px 5px 0;  
  border-top-color  ：  black ;  
} 
。工具提示。左下角。< span class =code-leadattribute> tooltip-arrow  {
  top  ：  -5px;  
  left  ：  5px;  
  border-width  ：  0 5px 5px;  
  border-底色 ： 黑色;  
} 
。 tooltip 。 right-right 。 tooltip-arrow  { 
  top  ：  -5px;  
 正确 ：  5px;  
  border-width  ：  0 5px 5px ;  
  border-bottom-color  ：  black;  
} 

 <   h4     id   = 左上角    data-toggle   = 工具提示   数据放置  =  左上角    data-original -title   = 左上角的工具提示 > 左上角<   / h4  >  
 <   script    < span class =code-attribute> type   =  text / javascript >  

（ '＃左上'）工具提示（ '节目'）;
< / script >

Hello,

How do I set bootstrap tooltip placement to "Top-right" of target element? Currently, it only have "Top, Bottom, Left, Right" options. I am trying to show tooltip on the long width textbox and I need to display tooltip to the top-rigth and right align with the target control (i.e Right end of the tooltip must be same as right end of the control). I couldn't find any solution yet. Is there any advanced plugin to serve this purpose?

Please advice,
Thanks in advance

解决方案

include these files

<pre lang="xml">&lt;script src=&quot;bootstrap-tooltip.js&quot;&gt;&lt;/script&gt;
&lt;script src=&quot;bootstrap-tooltip-extension.js&quot;&gt;&lt;/script&gt;</pre>

.tooltip.top-left .tooltip-arrow {
  bottom: -5px;
  left: 5px;
  border-width: 5px 5px 0;
  border-top-color: black;
}
.tooltip.top-right .tooltip-arrow {
  bottom: -5px;
  right: 5px;
  border-width: 5px 5px 0;
  border-top-color: black;
}
.tooltip.bottom-left .tooltip-arrow {
  top: -5px;
  left: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: black;
}
.tooltip.bottom-right .tooltip-arrow {
  top: -5px;
  right: 5px;
  border-width: 0 5px 5px;
  border-bottom-color: black;
}

<h4 id="top-left" data-toggle="tooltip" data-placement="top-left" data-original-title="Tooltip on top left">Top Left</h4>
  <script type="text/javascript">

('#top-left').tooltip('show'); </script>

这篇关于如何将bootstrap工具提示放置设置为“右上角”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！