Adding custom color using CSS in a string of text from data-tooltip?

Question

I wish to change the color of certain words in the data-tooltip string.

<a class="link1" href="somejavascriptignore" data-tooltip="Click this to refresh the page">Refresh page</a>

The words i wish to color a different way is "refresh" how can i target those words without having to edit the source link? Is it possible with CSS?

I think this website should have a voting system for comments to vote for you @OneHoopyFrood — , May 12 '15 at 17:32
Well it does, but I guess this really is an answer so I'll post it as one. — OneHoopyFrood, May 12 '15 at 17:33
You can style words in the document, after wrapping them in an element that can be selected, but you can't style words in the `data-tooltip` *attribute*. — David Thomas, May 12 '15 at 17:37
Oh true, if that's what you're trying to accomplish it can't be done. — OneHoopyFrood, May 12 '15 at 17:38

score 0 · Accepted Answer · edited May 23 '17 at 12:06

UPDATE:

After a more careful reading of your question I got inspired. You're asking to highlight text in the tooltip, not just the element itself, so here's a way to do just that with JS (jQuery is used heavily):

$("[data-toggle=popover]").popover({ trigger: 'hover', html: true })

  .on('show.bs.popover', function() {
    var ele = $(this);
    ele.attr('data-original-content', ele.attr('data-content'));
    var origContent = ele.attr('data-original-content');

    var searchTerm = "refresh";

    var searchRegex = new RegExp(searchTerm, 'gi');
    var newContent = origContent.replace(searchRegex, function(match) {
        return "<span class='green-text'>" + match + "</span>"
    });
    $(this).attr('data-content', newContent);
  })

  .on('hidden.bs.popover', function() { 
    $(this).attr('data-content', $(this).attr('data-original-content'));
  });

And here's a bootply to show it working

Basically on the callback for show I pre-parse the content and add in the highlighting like I discussed above. Then on hide I restore it so it doesn't compound on each popover call.

You have to do it this way because the popover node is generated and destroyed dynamically with each show and hide.

That was a fun problem.

Original Answer

Short answer: No, you need JavaScript.

Longer answer: You'll need to use JavaScript to get the content of the link, parse it for the words you want, surround them with <span> elements with a class that CSS can act on to change their color.

The end result would look like this:

<a class="link1" href="somejavascriptignore" data-tooltip="Click this to refresh the page"><span class="green-text">Refresh</span> page</a>

Rather than do this yourself, try a plugin. Like this one

This isn't exactly a duplicate, but the more detailed answer to your question can be found here: How to highlight text using javascript

Thanks, was hoping for a cheap shortcut here, but i guess naw, tooltip so nice tho :) oh well! — karnehe, May 12 '15 at 17:44
Sorry, I didn't read your title thoroughly enough. If you want to highlight the text in the tooltip i can still be done, but it's tricky. You'll have to do this same thing but attach to the tooltip element itself. That means you have to be sure your script is running after the tooltip is created, which can be tricky. It's probably not worth it. — OneHoopyFrood, May 12 '15 at 17:48
I did a bit more digging and indeed you can't easily do anything to the tooltip. But if you use popover and it's lifecycle callbacks you could make this easier, but it would run ever time the popover is shown because the node is created anew each time. — OneHoopyFrood, May 12 '15 at 17:52

Adding custom color using CSS in a string of text from data-tooltip?

1 Answers1