如何将css工具提示仅应用于某个元素?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何将css工具提示仅应用于某个元素?相关的知识,希望对你有一定的参考价值。

我怎样才能将margin仅应用于一个tooltip元素?我正在使用bootstrap 4

$('[data-toggle="tooltip"]').tooltip()
.tooltip.bs-tooltip-right{
    margin-left: 30px;
}
button{
    margin-top: 20px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br>
<button type="button" class="btn btn-secondary applyCssToolTipHere" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
答案

使用tooltip组件提供的custom events删除/添加类:

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

$('.applyCssToolTipHere').on('show.bs.tooltip shown.bs.tooltip', function () {
  $('.tooltip').addClass('apply');
})
$('.applyCssToolTipHere').on('hide.bs.tooltip hidden.bs.tooltip', function () {
  $('.tooltip').removeClass('apply');
})
.apply{
    background:red;
}
button{
    margin-top: 20px !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br>
<button type="button" class="btn btn-secondary applyCssToolTipHere" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button><br>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>

以上是关于如何将css工具提示仅应用于某个元素?的主要内容,如果未能解决你的问题,请参考以下文章

如何仅将样式应用于父元素?

Wordpress:如何仅将 widget_title 过滤器应用于某个侧边栏中的小部件?

如何仅将应用程序片段设置为纵向模式?

如何仅在标签中的特定单词上显示工具提示?

给定一个文档,选择一个相关的片段

如何通过样式/主题仅将颜色控制*属性应用于工具栏而不影响其余项目样式