Welcome to TalkGraphics.com
Results 1 to 2 of 2
  1. #1
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Lightbulb Formatting pop-up text (Title)

    On my browser, I find the default pop-up text on hover is small and set as white on black - hover over the TG Logo for a second or two.

    I also do not like that the hover is a hunt-the-thimble process - there is no cue to let you know there is some information sitting in a pop-up if you don't know where to look.

    In HTML, if you have an <abbr> tag with a title attribute, the abbreviated text is dotted underlined and the hover usually reveals the fuller definition.
    I wanted to use this approach and colour my pop-up text into the bargain for any text with a title attribute.

    The Approach
    • Highlight your text.
    • Use Web Animation > Selected object > Show pop-up text (Title): add your hover text.
    • Include the following CSS in the Website Code (Head):

    Code:
    <style>
    [title] {
      text-decoration: underline;
      text-decoration-style: dotted;
      text-decoration-color: green;
      text-decoration-thickness: 5px;  
      text-decoration-skip-ink: auto;
      position: relative;
    }
    [title]:hover:after {
      content: attr(title);
      position: absolute;
      top: -120%;
      left: 0;
      color: red;
      background-color: yellow;
      border: 2px solid blue;
      border-radius: 16px;
      padding: 2px;
      opacity: 0.9;
      font-size: 18px;
    }
    </style>
    I 'll leave you to experiment with sizes, position, opacity and colours.

    It works best with Text Areas. It doesn't for images.

    Do note: the original title still appears after a short time.
    You will need some JavaScript to stop this.

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

  2. #2
    Join Date
    Apr 2012
    Location
    SW England
    Posts
    15,891

    Lightbulb Re: Formatting pop-up text (Title)

    Here is where I now am with it removing the title attribute and placing its contents into both a data-title and an alt attribute, the latter is as an assist towards Accessibility.
    I decided that images and other constructs were best left as-is.

    My original purpose was to compile a set of website-specific phrases that could be searched against. I am comfortable with what I've made.

    Website Code (Head):
    Code:
    <style>
    span[data-title] {
      text-decoration: underline;
      text-decoration-style: dotted;
      text-decoration-color: green;
      text-decoration-thickness: 5px;  
      text-decoration-skip-ink: auto;
      position: relative;
    }
    span[data-title]:hover:after {
      content: attr(data-title);
      position: absolute;
      top: -120%;
      left: 0;
      color: red;
      background-color: yellow;
      border: 2px solid blue;
      border-radius: 16px;
      padding: 2px;
      opacity: 0.9;
      font-size: 18px;
    }
    </style>
    Website Code (Body):
    Code:
    <script>
    var ttl = document.querySelectorAll('span[title]');
    for (i=0;i<ttl.length;i++) {
      x=ttl[i].getAttribute('title');
      ttl[i].setAttribute('data-title', x);
      ttl[i].setAttribute('alt', x);
      ttl[i].removeAttribute('title');
    }
    </script>
    The pop-up text is added to a word of phrase in Text mode and not to a complete Text object.

    Here is a crude demonstration: JS+CSS - Formatting Title Attributes.xar

    Acorn
    Acorn - installed and active Xara software: Cloud+/Pro+, XDPXv18 , XWDPv12/v15, XPGDv10, X3D7, Xara Xtreme 5, and others back through time (to CC's Artworks).
    Technical remediation and consultancy for your web designs. TG Nuggets you might like. Report faults: Magix; Xara Cloud+/Pro+

 

 

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •