8

How do I change the styling of the title attribute in the following tag without using javascript or CSS, since I am inserting the HTML into a specific spot in an otherwise uneditable doc.

    <span title = "This is information"> This is a test
    </span>
user6556957
  • 185
  • 2
  • 3
  • 7
  • @Turnip, he said that he does not want to use css nor javascript, so it's not a duplicate of that question. Regarding this, I don't think it's even possible to do it without any of this. – meJustAndrew Jul 06 '16 at 16:35
  • 1
    OP added that requirement after the vote. And yes, it is impossible to style _anything_ without CSS. – Turnip Jul 06 '16 at 16:36
  • @Turnip so redact your closing vote. – Adam Buchanan Smith Jul 06 '16 at 16:36
  • 1
    How do you expect to style anything without CSS? That requirement makes this question nonsense. – scrappedcola Jul 06 '16 at 16:39
  • @scrappedcola could it be possible that OP is asking for a non external css, and does not know the difference? – Adam Buchanan Smith Jul 06 '16 at 16:40
  • Sorry about being unclear. You are right, I really don't understand what I am talking about. This may or may not help: I am editing the page in a specific spot, but cannot see the style tags with CSS that I think are at the top of most inline HTML docs. I guess from what you say I would have to use CSS, but can I do this in a simple way within the tiny box in which I am inserting the HTML? – user6556957 Jul 06 '16 at 16:59
  • @user6556957 look at example 3 in my answer, that will probably be the simplest way to add a style. – Adam Buchanan Smith Jul 06 '16 at 17:23
  • So are you wanting to style the hover box that shows up when you specify a title or the span itself? If it's the span itself Example 3 in Adam's answer is the way to go. If it's the hover box that appears because of the title attribute then it gets complicated as there isn't really any direct css to interact with the system default tooltip. You can mask it as in [this post](http://stackoverflow.com/questions/2011142/how-to-change-the-style-of-title-attribute-inside-the-anchor-tag) – scrappedcola Jul 06 '16 at 17:36

1 Answers1

16

https://jsfiddle.net/LvjaxLfn/153/

<span aria-label="This is information">This is a test</span>

span:hover {
    position: relative;
}

span[aria-label]:hover:after {
     content: attr(aria-label);
     padding: 4px 8px;
     position: absolute;
     left: 0;
     top: 100%;
     white-space: nowrap;
     z-index: 20;
     background:red;
}

Using an aria label to keep accessibility

You could also add a transition delay to make it show up after a delay like a native html title

https://jsfiddle.net/f9zna6k2/10/

span {
  position: relative;
  cursor: pointer;
}

span[aria-label]:after {
  opacity:0;
  content: attr(aria-label);
  padding: 4px 8px;
  position: absolute;
  left: 0;
  top: 100%;
  white-space: nowrap;
  z-index: 20;
  background:red;
  transition: opacity 0.5s;
  pointer-events:none;
}

span[aria-label]:hover:after {
  opacity:1;
  transition-delay:1.5s;
}
BritishSam
  • 1,070
  • 8
  • 24