HTML Feature (something)

Nope not quite. :slight_smile: Here is the HTML generated by this plug in:

<!-- this is for the loading image -->
<div style="position: absolute; display: none;" id="cluetip-waitimage"></div>

<!-- outer wrap -->
 <div class="" style="display: none; position: absolute; width: 275px; left: 81px; z-index: 97; top: 2px;" id="cluetip">
 
 <!-- I am guessing this is for the shadow -->
  <div style="z-index: 96; opacity: 0.1; top: 1px; left: 1px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
  <div style="z-index: 96; opacity: 0.1; top: 2px; left: 2px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
  <div style="z-index: 96; opacity: 0.1; top: 3px; left: 3px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
  <div style="z-index: 96; opacity: 0.1; top: 4px; left: 4px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
  <div style="z-index: 96; opacity: 0.1; top: 5px; left: 5px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>
  <div style="z-index: 96; opacity: 0.1; top: 6px; left: 6px; position: absolute; background-color: rgb(0, 0, 0); display: block; height: 131px; width: 275px;"></div>

  <!-- this is the actual content title/description -->
   <div style="position: relative; z-index: 97; overflow: visible; height: auto;" id="cluetip-outer">
    <h3 id="cluetip-title">This is the title</h3>
    <div id="cluetip-inner">The first set of contents comes after the first delimiter in the title. In this case, the delimiter is a pipe</div>
   </div>
       
   <!-- not sure what this is for but I think it is the rounded corner option -->
   <div id="cluetip-extra"></div>
   
  <!-- this is for the arrow(s) -->
   <div style="z-index: 98; display: none;" id="cluetip-arrows" class="cluetip-arrows"></div>
   
 </div>

You can find an example of the necessary .css selectors in the jquery.cluetip.css file in the cluetip folder. :slight_smile:

/***************************************
   =cluetipClass: 'default'
-------------------------------------- */

.cluetip-default {
  background-color: #d9d9c2;
}
.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a;
  color: #fff;
}
.cluetip-default #cluetip-title a {
  color: #d9d9c2;
  font-size: 0.95em;
}
.cluetip-default #cluetip-inner {
  padding: 10px;
}
.cluetip-default div#cluetip-close {
  text-align: right;
  margin: 0 5px 5px;
  color: #900;
}

That is what I was going by… can’t be where I have to put all that HTML into my code :nono:

Doesn’t this give you a hint?

.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a; /* HINT */
  color: #fff;
}
<div id="masterhome><a class="title" href="#" title="blah blah blah"></a></div>

for the CSS

.cluetip-default a .title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a; /* HINT */
  color: #fff;
}

Just copy that .css file into your css directory and then link to it from the <head> with:

<link rel="stylesheet" type="text/css" media="screen" href="css/jquery.cluetip.css" />.

Then alter the already existing values to what you want. What features of this thing do you want to use? This will determine what parts of the css are required and need to be edited, but to just change the colors and the text you can edit these 2:

Starts on line 38 of jquery.cluetip.css

.cluetip-default #cluetip-outer {
  position: relative;
  margin: 0;
  background-color: #d9d9c2;
}
.cluetip-default h3#cluetip-title {
  margin: 0 0 5px;
  padding: 8px 10px 4px;
  font-size: 1.1em;
  font-weight: normal;
  background-color: #87876a;
  color: #fff;
}

:slight_smile:

Alright I’ll try that, once I fix this other problem <sigh>

What is the other problem?