Question

我在网页上的div上使用来自twitter bootstrap的工具提示。工具提示已初始化，但在第一次悬停时，它处于错误的位置;然而，在随后的悬停中，工具提示处于正确的位置。

我认为问题正在发生，因为工具提示附加的div是绝对定位的。

这是我的html中的div标签：

<div class="btn-group" id="sample-menu" data-toggle="tooltip" data-placement="left" title="Tooltip on left">

这是第一个悬停时工具提示的显示方式：

以下是在此之后每个悬停显示的方式：

（尺寸不仅仅改变截图裁剪尺寸）

应用于div的样式是：

#sample-menu {
  position: absolute;
  top: 95px;
  right: 608px;
}

我可能会以不同的方式定位div以使其工作，我只是想知道为什么工具提示似乎在绝对定位的div上完美运行，但仅在第一次悬停之后。

**我在没有绝对定位的div上添加了一些工具提示，并且我遇到了同样的问题（工具提示的第一次出现从我的元素中删除，然后在第一次出现后是正确的）。我在页面上有一个svg，其元素正在添加并使用javascript（d3）进行调整。在添加/调整所有页面元素之后，似乎需要调用某些东西来重新定位工具提示，但是，Bootstrap Tooltip或Tether重新定位解决方案都没有对我有效。

Answer 1

以下对于我来说，对于涉及绝对定位的工具提示起了作用：

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

我只需在页面上完成所有内容渲染后触发此脚本，一切都设置正常。此外，在工具提示更新的区域，我必须再次运行它。

Answer 2

这是codepen of the original problem

我已经确定了身体'亲戚'的位置，这样我的孩子元素就可以完全按照我想要的方式定位，而且我还将身体的边距设置为'0 auto'以使内容居中。这些样式干扰了Eric在回答中提到的工具提示容器选项解决方案。

/*original css*/
body {
  position: relative;
  width: 980px;

  /*set as important to work in codepen example*/
  margin:0 auto !important;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js that didn't solve tooptip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
    container: 'body'
  });
});

首先将这种造型应用于身体是不好的做法。这是一个codepen that solves this problem，在没有工具提示问题的情况下仍然可以提供我想要的外观和行为。我在内容周围添加了一个容器来应用样式，然后在Eric G建议的工具提示“容器：'body'”解决方案中工作。

/*new css with styling on a container div instead of the body*/
.container {
  position: relative;
  width: 980px;
  margin:0 auto;
}

#sample-menu{
  position: absolute;
  top: 109px;
  left: 600px;
}

//js now fixes the tooltip positioning issue
$(function(){
  $('[data-toggle="tooltip"]').tooltip({
   container: 'body'
  });
});

Answer 3

这是很不错的解决方法：您没有分配默认的Bootstrap工具提示，而是仅分配了自定义的数据提示：

.Resize(TotalRows, TotalCols)

并且在DOM中进行每次更改后，您都可以运行以下功能：

<button type="button" class="btn" data-hint="Add new column">

其中 block 是包含新添加的包含提示的元素的任何父元素。简单高效。也使HTML变得更短：-）

Answer 4

添加org.springframework.beans.factory.BeanCreationException: Error creating bean with name 'householdRepository' defined in org.stevie.spring.test.webmvc.household.HouseholdRepository defined in @EnableCouchbaseRepositories declared on CouchbaseConfig: Invocation of init method failed; nested exception is java.lang.NullPointerException at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1794) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.doCreateBean(AbstractAutowireCapableBeanFactory.java:594) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.createBean(AbstractAutowireCapableBeanFactory.java:516) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.lambda$doGetBean$0(AbstractBeanFactory.java:324) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory$$Lambda$171/0000000000000000.getObject(Unknown Source) ~[na:na] at org.springframework.beans.factory.support.DefaultSingletonBeanRegistry.getSingleton(DefaultSingletonBeanRegistry.java:226) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.doGetBean(AbstractBeanFactory.java:322) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractBeanFactory.getBean(AbstractBeanFactory.java:202) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.DefaultListableBeanFactory.preInstantiateSingletons(DefaultListableBeanFactory.java:878) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.context.support.AbstractApplicationContext.finishBeanFactoryInitialization(AbstractApplicationContext.java:879) ~[spring-context-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:551) ~[spring-context-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:143) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:758) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:750) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:397) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:315) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1237) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1226) ~[spring-boot-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.stevie.spring.test.webmvc.SpringTestDriveWebmvcApplication.main(SpringTestDriveWebmvcApplication.java:10) ~[classes/:na] at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:na] at java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:na] at java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:na] at java.base/java.lang.reflect.Method.invoke(Method.java:564) ~[na:na] at org.springframework.boot.devtools.restart.RestartLauncher.run(RestartLauncher.java:49) ~[spring-boot-devtools-2.3.3.RELEASE.jar:2.3.3.RELEASE] Caused by: java.lang.NullPointerException: null at org.springframework.data.couchbase.core.mapping.BasicCouchbasePersistentProperty.getFieldName(BasicCouchbasePersistentProperty.java:78) ~[spring-data-couchbase-4.0.3.RELEASE.jar:4.0.3.RELEASE] at org.springframework.data.couchbase.core.mapping.BasicCouchbasePersistentProperty.isIdProperty(BasicCouchbasePersistentProperty.java:103) ~[spring-data-couchbase-4.0.3.RELEASE.jar:4.0.3.RELEASE] at org.springframework.data.couchbase.core.mapping.BasicCouchbasePersistentEntity.returnPropertyIfBetterIdPropertyCandidateOrNull(BasicCouchbasePersistentEntity.java:72) ~[spring-data-couchbase-4.0.3.RELEASE.jar:4.0.3.RELEASE] at org.springframework.data.couchbase.core.mapping.BasicCouchbasePersistentEntity.returnPropertyIfBetterIdPropertyCandidateOrNull(BasicCouchbasePersistentEntity.java:39) ~[spring-data-couchbase-4.0.3.RELEASE.jar:4.0.3.RELEASE] at org.springframework.data.mapping.model.BasicPersistentEntity.addPersistentProperty(BasicPersistentEntity.java:218) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext$PersistentPropertyCreator.createAndRegisterProperty(AbstractMappingContext.java:552) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext$PersistentPropertyCreator$$Lambda$977/0000000000000000.accept(Unknown Source) ~[na:na] at java.base/java.util.stream.ForEachOps$ForEachOp$OfRef.accept(ForEachOps.java:183) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:177) ~[na:na] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:195) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:177) ~[na:na] at java.base/java.util.HashMap$ValueSpliterator.forEachRemaining(HashMap.java:1766) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:497) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:487) ~[na:na] at java.base/java.util.stream.ForEachOps$ForEachOp.evaluateSequential(ForEachOps.java:150) ~[na:na] at java.base/java.util.stream.ForEachOps$ForEachOp$OfRef.evaluateSequential(ForEachOps.java:173) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:239) ~[na:na] at java.base/java.util.stream.ReferencePipeline.forEach(ReferencePipeline.java:497) ~[na:na] at org.springframework.data.mapping.context.AbstractMappingContext$PersistentPropertyCreator.addPropertiesForRemainingDescriptors(AbstractMappingContext.java:537) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext.addPersistentEntity(AbstractMappingContext.java:390) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext$PersistentPropertyCreator$$Lambda$971/0000000000000000.accept(Unknown Source) ~[na:na] at java.base/java.util.Collections$SingletonSet.forEach(Collections.java:4872) ~[na:na] at org.springframework.data.mapping.context.AbstractMappingContext$PersistentPropertyCreator.createAndRegisterProperty(AbstractMappingContext.java:562) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext$PersistentPropertyCreator.doWith(AbstractMappingContext.java:520) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.util.ReflectionUtils.doWithFields(ReflectionUtils.java:705) ~[spring-core-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext.addPersistentEntity(AbstractMappingContext.java:389) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext.getPersistentEntity(AbstractMappingContext.java:263) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext.getPersistentEntity(AbstractMappingContext.java:206) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.mapping.context.AbstractMappingContext.getPersistentEntity(AbstractMappingContext.java:90) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.repository.core.support.RepositoryFactoryBeanSupport.lambda$afterPropertiesSet$4(RepositoryFactoryBeanSupport.java:295) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.repository.core.support.RepositoryFactoryBeanSupport$$Lambda$903/0000000000000000.accept(Unknown Source) ~[na:na] at java.base/java.util.Optional.ifPresent(Optional.java:176) ~[na:na] at org.springframework.data.repository.core.support.RepositoryFactoryBeanSupport.afterPropertiesSet(RepositoryFactoryBeanSupport.java:295) ~[spring-data-commons-2.3.3.RELEASE.jar:2.3.3.RELEASE] at org.springframework.data.couchbase.repository.support.CouchbaseRepositoryFactoryBean.afterPropertiesSet(CouchbaseRepositoryFactoryBean.java:89) ~[spring-data-couchbase-4.0.3.RELEASE.jar:4.0.3.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.invokeInitMethods(AbstractAutowireCapableBeanFactory.java:1853) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] at org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory.initializeBean(AbstractAutowireCapableBeanFactory.java:1790) ~[spring-beans-5.2.8.RELEASE.jar:5.2.8.RELEASE] ... 23 common frames omitted为我解决了此问题，如下所示：

boundary: 'window'

自举文档：

当父容器发生溢出时，工具提示位置会尝试自动更改：自动或溢出：像我们的.table-response一样滚动，但仍保持原始展示位置。要解决此问题，请将border选项设置为默认值'scrollParent'以外的其他值，例如'window'：

Answer 5

您还可以在工具提示配置中指定其他容器（不仅是'body'）。

我有这样的HTML项目：

<body>
    <div class='wrapper'>
    ...
        <div>
            <p>Test message with tooltip <span class="tooltip-icon" 
                     data-toggle="tooltip" 
                     data-placement="right"
                     title="Tooltip test">?</span></p>
        </div>
    ...
    </div>
</body>

并且使用此JS在工具提示定位计算方面存在问题：

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

据我了解，问题是由margin: 0元素的body样式引起的。

尝试解决此问题而不更改body元素的样式和默认标记，我使用了其他容器，如下所示：

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

并且一切正常，没有任何改变。

来自引导程序文档：

https://getbootstrap.com/docs/4.3/components/tooltips/#options

name:    container 
values:  string | element | false
default: false  
descr.:  Appends the tooltip to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the tooltip in the flow of the document near the triggering element - which will prevent the tooltip from floating away from the triggering element during a window resize.

如果您要检查引导程序的tooltip.js，则会看到，如果将container值设置为字符串，它将尝试在DOM中使用给定的选择器查找元素（请参阅{{1} }）

Answer 6

我在Bootstrap 4中遇到了同样的问题，并且由于这里的其他答案对我不起作用（那些容器为'body'的人），我暂时仅通过在第一个mousenter上初始化来解决了该问题/ strong>。（之后，属性“ data-original-title”将存在）

此代码的另一个好处是，工具提示将适用于页面上尚不属于DOM的每个新项目。那是因为我们从$（document）.on（'mouseenter'，...）
开始
/** * This code will execute only once when hovering the first time (mouseenter). * Then we close it and open it again for fixing wrong placement. * (It happens without noticing it) */ $(document).on('mouseenter', '[data-toggle="tooltip"]:not([data-original-title])', function() { $(this) .tooltip() .tooltip('show') /** * Fix for wrong placement when Bootstrap's tooltip open the first time */ .tooltip('hide') .tooltip('show') ; });

Bootstrap工具提示在初始悬停时处于错误位置，然后处于正确位置

6 个答案: