0

My problem is pretty simple, but I cannot figure out a way to do it.

My goal is to make a title attribute of an anchor tag be able to contain a link. I also want to be able to style this title with CSS. One solution for this would be to somehow add an anchor within the title attribute of another anchor, which is not possible as far as I know. Another solution for this (that would work for me) is to be able to put an anchor tag within the "content" styler of my css, so I could make a pseudo 'anchor title' through CSS. As far as I know this is also not possible.

Here is a codepen of some code that may clarify: http://codepen.io/anon/pen/miabL

Here is the HTML of an example:

<a id = "anchor" data-title = "Here is some sample text. 'CLICK HERE.' Here is some more sample text."> Sample Anchor</a>

Here is the CSS that applies to the example above:

a[data-title]:hover:after {
  content: attr(data-title);
  background: purple;
  color: white;
  margin-left: 0px;
}

To put some further perspective on the issue, here is a link to the webpage I am trying to apply this to: http://somil.site11.com/programs.html I want a description to appear off to the right upon hover over each link. This description must be able to contain styles/links and must stick around either after you click on the link or if you mouse over to it after hovering over each corresponding link. There has to be multiple descriptions on the same page which is why I chose to use the title attribute as it sticks around upon hover over to it.

I suspect this may require javascript or jquery, which is fine, but a CSS/HTML solution is preferable. Thanks in advance.

somil
  • 340
  • 5
  • 18
  • 1
    @Quentin The duplicate is somewhat questionable. Here OP isn't actually using the `title` attribute, but a custom `data-title` attribute and the CSS `content: attr(data-title)`. It's a significantly different use case than the other question (though I think the answer is probably the same). – p.s.w.g Jul 17 '14 at 21:56
  • 1
    A better duplicate: http://stackoverflow.com/questions/4505093/css-content-property-is-it-possible-to-insert-html-instead-of-text – Blender Jul 17 '14 at 21:57
  • 1
    I do not think this is a duplicate. any tag with an id is an anchor, and there is no need of data-attributes to show something. a child container well formed containing text and links can be shown on hover , just like drop down menus, to point at something very familiar :). I would advise the OP to think it over :) – G-Cyrillus Jul 17 '14 at 22:04
  • 1
    You can easily do this using a jQuery tooltip plugin, like [qtip](http://craigsworks.com/projects/qtip/docs/) or [Tooltipster](http://iamceege.github.io/tooltipster/#demos) – jammykam Jul 17 '14 at 22:24
  • I saw the duplicates mentioned, but they didn't help me. I was actually looking for what @jammykam stated. – somil Jul 17 '14 at 23:52

0 Answers0