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;
}

Answer 1

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".

Answer 2

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

Style-my-tooltips jQuery plugin

Simple to use and even you can customize it .

Answer 3

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/