How can you implement a CSS tooltip specifically for a single element?

Is there a way to add a margin specifically to one tooltip element in 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>

twitter-bootstrapcsstooltipbootstrap-4

Answer №1

Utilize custom events provided by the tooltip component to toggle classes:

$('[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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What could be causing my slider to malfunction?

No errors are being returned by the console. Currently utilizing Unslider. The setup includes: <div class="slider"> <ul> <li><img src="img/one.jpg" alt=""></li> <li><img src="img/one.jpg" ...

jqueryhtmlcssunslider

Ensure that all divs have the same height and padding when resizing

I have 3 divs nested within a parent div. My goal is to dynamically set the height of all the child divs to match the height of the div with the maximum height, even when the screen resizes due to responsiveness. Below is my HTML structure: <div class ...

javascriptjquerycss

Guide on creating a logarithmic-based bar rating system

I am working on creating a bar rating system for my website, but the current design doesn't look great. I want the height of the bars to increase like an exponential curve gradually, starting off not too steep and gradually increasing afterward. Here ...

jquerycssratingvotingvoting-system

How can I smoothly slide my div to the left when reaching a specific height by utilizing the jQuery scroll method and animation?

Currently, I have a fixed div positioned to the right at -35px. However, my goal is for it to move to the right at 0px once the user scrolls past 350px. Below is the JQuery code I am using: $(window).scroll(function() { var height = $(window).scrollTop(); ...

jquerybootstrap-4

Switching button class when hovering over another div

When you click on the "collapsible-header" div, I want the text "TE LAAT" in the button to change to "NU BETALEN". Currently, the CSS code changes the text on hover, but I want it to change on click when the collapsible-header also has the active class. T ...

javascriptjqueryhtmlcssonclick

How can you achieve three layers of nested quotes in Dynamic HTML?

Working on an app that utilizes JQuery and JQTouch for iOS. The issue I'm facing involves dynamically generated HTML lists where the user clicks a row that needs to be highlighted. However, achieving this has proven tricky due to nesting 3 sets of quo ...

javascripthtmlcssonclickhtml-lists

What is the method for displaying an asterisk in a select box option?

Is there a way to append an asterisk after the first option in a select element? Here is my html <select class="form-control textyformcontrol"> <option selected>Service area</option> <option>First Option</option> &l ...

htmlcss

Reflection mask feature in Chrome for Android that uses Webkit technology

Chrome Reflection on Desktop Computers By using Chrome on a desktop computer, I am able to create an image reflection with the following CSS code: img { -webkit-box-reflect: below 0 -webkit-gradient( linear, left top, left bottom, from(tran ...

androidcssgoogle-chrome

Displaying incorrect results within the div container

I have been developing a website where a div element on a specific page displays values from a PHP file. Below is the PHP code responsible for rendering the information on the HTML: $output .= ' <div class="row text-left col-md-3 ...

phphtmlcss

Applying a CSS transition to transform properties excluding rotation effects

I'm looking to apply a transitional animation to an element's transform property without affecting the rotation. Here is the code snippet: <html> <head> <link rel="stylesheet" href="style.css"> <script src="script.js ...

javascriptjquerycsscss-transitions

A reliable approach for dynamically altering SVG graphics

It seems like IE10 does not support CSS transformations for SVGs, only attribute transformations. Here is an example: <svg><rect id="myrect" width="200" height="200"></rect></svg> setTimeout(function() { var r = document.getE ...

javascripthtmlcsssvgcss-transitions

Scss - Only one for mobile devices

Just dipping my toes into scss and I've got a quick question. Here's the snippet of scss code I'm working with: .page { max-width: 1200px; position: relative; width: 100%; ul{ background-color: black; width ...

csssass

HTML and CSS site lacking responsiveness

I am new to HTML and I have created a page that looks good on desktop, but it is not responsive on mobile devices. Can someone please help me with my HTML and CSS code? .link-menu { color: black; } .topbar-p ...

javascripthtmlcssbootstrap-4

What is the best method for starting a string using the symbol '~'?

Hello everyone! I have a task that requires me to add a special feature. The user needs to enter something in a field, and if it starts with the tilde (~), all subsequent entries should be enclosed in a frame within the same field or displayed in a list ...

javascripthtmlcssstroke

CSS - enhancing web design with accessible selectors

Hey everyone, I'm really struggling to figure out what's going on with this code. It's a simple CSS issue but for some reason the browser (FF) is completely ignoring the last CSS selection code. Here's the HTML snippet: <div id="c ...

csscss-selectors

What is the correct way to integrate a HTML/CSS/JS theme into a Vue project effectively?

As a newcomer, I recently acquired a bootstrap theme that comes with HTML, CSS, and JavaScript files. My goal now is to integrate this theme into Vue in order to make it fully functional. The challenge I am facing is how to successfully incorporate the the ...

javascripthtmlcssvue.js

Adjust color in real-time with JavaScript

I am using a json file to store data for generating a diagram, and I want to change the color of the diagram conditionally based on an attribute in the json. If the attribute is false, the color should be red, and if true, it should be green. Here is a sni ...

javascripthtmlcssjsonangular

What is the best way to align multiple form elements both horizontally and vertically within a frame?

Issue I have checked out various resources, like this one and this one, but I am still struggling to center my form elements both vertically and horizontally on the screen. I have tried using flex, padding, and stretching but nothing seems to work. Even a ...

htmlcssflexbox

Offspring of the superior element resting above another element

I'm dealing with a unique situation involving the Z-INDEX property. Check out my HTML setup below. <div class="player"> <div class="player-line"> <div class="player-handle"></div> <!-- /.player-handle --> </d ...

htmlcssz-index

Displaying elements side by side on larger screens and centered on smaller screens

Is there a way to arrange elements next to each other on wider screens, aligning them left and right, while also centering one above the other on narrower screens? Preferably without using media queries: ...

cssbootstrap-4