How to change the style/css of a tooltip?

Question

first of all is this called a tooltip or am i on about something different?

anyway, i have managed to get a tooltip working as can be seen in the image link below. but the little box that pops up saying 'Password must be more than 6 characters' how do i target and hit this and change the style. so far i have either not been able to change it or the box i am hovering over is styled.

http://www.tiikoni.com/tis/view/?id=1fb09eb

here is some code:

html:

<label for="password">Password </label> <input type="password" id="pword" title="Password must be more than 6 characters long" ><br>

js:

<script>
  $(function() {
    $( document ).tooltip({
        tooltipClass: "passwordTooltip"});
  });
  </script>

css:

[title]:after{
    background: #333;
}

[title]:hover:after{
    background: #333;
}

you have to use a custom javascript plugin to do that. – Daniel A. White Sep 22 '15 at 14:16 — Daniel A. White, Sep 22 '15 at 14:16

score 2 · Accepted Answer · answered Sep 22 '15 at 14:44

2

It seems to me you are trying to style default popup titles with some jQueryUI tooltip code? If you do, you must include the jQueryUI source files :

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

Now you can add a .tooltip class (or use any other kind of selector) to those elements you want to have a styled tooltip for :

<input type="password" id="pword" class="tooltip" title="Password must be more than 6 characters long">

$('.tooltip').tooltip();

jQueryUI will automatically grab the title of each element and make it to the content of the styled tooltip. If you want to change the style of the tooltip, simply create a CSS class and initialise as above :

.passwordTooltip {
    background: #333;
    color: #fff;
}

$('.tooltip').tooltip({
   tooltipClass: "passwordTooltip"
});

demo -> https://jsfiddle.net/fsr9d7Le/

answered Sep 22 '15 at 14:44

davidkonrad

83,997
17
205
265

it has deleted the input box for some reason and i have these lines of code: `script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"> ` the smoothness is a later version isn't it? @davidkonrad – Obese Octopus Sep 22 '15 at 15:27
@ObeseOctopus - deleted the input box? what browser are you using? AFAIK there is no correlation between jQueryUI versioning and jQuery. 1.11.4 is the latest version, should work with all jQuery +1.6 -> http://jqueryui.com/download/ – davidkonrad Sep 22 '15 at 16:42
ok something is seriously going wrong. I have set my jsfiddle up exactly the same way you have, yet in mine..nothing happens https://jsfiddle.net/yu5hnxup/ what the heck!? – Obese Octopus Sep 23 '15 at 08:42
ok worked out that was to do with the external resources but now that i have added more code, it is not working... https://jsfiddle.net/yu5hnxup/4/ – Obese Octopus Sep 23 '15 at 08:46
sorry for the bombardment of comments, i have now taken out external resources and put them in my code. the tooltip looks different, however, when altering the css it doesn't change it? https://jsfiddle.net/yu5hnxup/8/ – Obese Octopus Sep 23 '15 at 09:04
@ObeseOctopus - have cleaned up your fiddle -> https://jsfiddle.net/yu5hnxup/17/ you had a lot of problems with inline links, double resources etc, but your major problem is that you are using **bootstrap and jQueryUI at the same time**!. That changes the picture dramatically. **You should not use both** - both have a `tooltip()`, thats why the input disappears. I would skip jQueryUI totally and style the boostrap tooltip instead -> [**Change bootstrap tooltip color**](http://stackoverflow.com/q/17642447/1407478) (and more) - you can just delete comments you not want to stay. – davidkonrad Sep 23 '15 at 09:20

Scott · Answer 2 · 2020-04-21T13:10:32.973

Here's a small VanillaJS script to add support for custom tooltip styling. It uses event delegation, so dynamically added elements with a title attribute should be scooped up and displayed properly.

(function() {
  "use strict";

  var tooltipDelay = 500;
  var timer = null;

  document.body.addEventListener("mouseout", function() {
    window.clearTimeout(timer);
  });

  document.body.addEventListener("mousemove", function(e) {
    var el = e.target;

    if (el != document.body && (el.hasAttribute("title") || el.hasAttribute("data-styletip"))) {
      if (el.title) {
        el["tt-title"] = el.title;
        el["tt-show"] = function(pos) {
          var tip = document.createElement("div");
          tip.classList.add("style-tip");
          
          if (el.hasAttribute("data-styletip-class")) {
            tip.classList.add(el.getAttribute("data-styletip-class"));
          }
          
          tip.innerText = el["tt-title"];
          tip.style.zIndex = 9e9;
          tip.style.pointerEvents = "none";
          tip.style.position = "absolute";
          tip.style.left = pos.x + "px";
          tip.style.top = pos.y + "px";
          
          document.body.appendChild(tip);
          
          el["tt-tip"] = tip;
          this.addEventListener("mouseout", el["tt-destroy"]);
        };
        
        el["tt-destroy"] = function() {
          if (el["tt-tip"]) {
            document.body.removeChild(el["tt-tip"]);
            delete el["tt-tip"];
          }
        };
        
        el.removeAttribute("title");
        el.setAttribute("data-styletip", true);
      }

      clearTimeout(timer);
      timer = window.setTimeout(function() {
        el["tt-destroy"]();
        el["tt-show"]({
          x: e.pageX,
          y: e.pageY
        });
      }, tooltipDelay);
    }
  });

})();

/* These styles get pretty close to the default Windows 7 tooltips */

.style-tip {
  font: 0.8em sans-serif;
  background: linear-gradient(#fff, #eee);
  color: rgba(0, 0, 0, 0.8);
  border-radius: 2px;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6), inset 0 0 0 1px rgba(0, 0, 0, 0.5);
  padding: 3px 5px;
}

.style-tip.red {
  background: linear-gradient(#fdd, #faa)
}

.style-tip.op-default {
  background: #333;
  color: #eee;
}

<p title="Normal tooltip&#013;With a linebreak!">Normal tooltip</p>
<p title="A red tooltip." data-styletip-class="red">Red tooltip</p>

<input type="password" id="pword" title="Password must be more than 6 characters long" placeholder="Input tooltip" data-styletip-class="op-default">

This should work as a drop-in script that "just works".

score 0 · Answer 3 · answered Sep 22 '15 at 17:17

0

You can use Style my tool tip plug in...

Style-my-tooltips jQuery plugin

Simple to use and even you can customize it .

answered Sep 22 '15 at 17:17

Northstar

323
4
16

How to change the style/css of a tooltip?

3 Answers3

Linked