Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • November 15, 2020 at 3:07 pm #1260586
    rvga

    Hello
    I was wondering if it was doable to customize the title attribute of a link.
    Some plugins call is ‘tooltip’. But they don’t do exactly what I want plus, it gets my site heavier and heavier

    Let’s say we have that link: <a title="An awsome theme!" href="https://kriesi.at/themes/enfold-overview/">Enfold</a>

    Would it be possible to customize its title:
    – BGround color
    – text color
    – and some other specifications?

    I guess it’s possible using CSS but I don’t know where to start.
    Would anyone please give me some hints and directions to do so?

    • This topic was modified 4 years, 1 month ago by rvga. Reason: give more information to my request
    November 15, 2020 at 9:09 pm #1260598
    Jordan Shannon

    Hey rvga,

    This would require a bit of css knowledge. Refer to the following:

    https://stackoverflow.com/a/17579580

    Best regards,
    Jordan Shannon

    November 17, 2020 at 2:42 pm #1261009
    rvga

    Thanks Jordan,
    I ended up on stackoverflow as well.
    It’s a bit beyond of my scope but I will give a chance… some times.
    Thx.

    November 17, 2020 at 3:05 pm #1261016
    Yigit

    Hi,

    Could you please post a link to your page and a screenshot showing the changes you would like to make so we can see if we can help you with it? :)
    You can upload your screenshots on imgur.com or Dropbox public folder and post the links here.

    Best regards,
    Yigit

    November 17, 2020 at 4:24 pm #1261046
    rvga

    Yes Yigit thx for coming.
    Please see on Stackoverflow the example I’d like to get – if possible, I’m aware it might be too much asking.
    https://stackoverflow.com/questions/2011142/how-to-change-the-style-of-the-title-attribute-inside-an-anchor-tag

    and the customized title would that one: https://twiners.fr/sharing/JZF0TJdmW

    November 17, 2020 at 4:30 pm #1261049
    Yigit

    Hey,

    Please add following line to your content (using Code Block element or text tab on Text Block element) and adjust it as needed

    
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

    Then add following code to Enfold theme options > General Styling > Quick CSS field 

    a.tip {
    border-bottom: 1px dashed;
    text-decoration: none
}
a.tip:hover {
    cursor: help;
    position: relative
}
a.tip span {
    display: none
}
a.tip:hover span {
    border: #c0c0c0 1px dotted;
    padding: 5px 20px 5px 5px;
    display: block;
    z-index: 100;
    background: url(../images/status-info.png) #f0f0f0 no-repeat 100% 5%;
    left: 0px;
    margin: 10px;
    width: 250px;
    position: absolute;
    top: 10px;
    text-decoration: none
}

    That should be it :)
    Best regards,
    Yigit

    November 30, 2020 at 4:23 pm #1264013
    rvga

    Hi Yigit
    I’ve followed your instructions but unfortunatelly it doesn’t work as expected: https://c-serp.fr/sand-box-enfold/
    Where am I wrong?

    November 30, 2020 at 4:30 pm #1264015
    Yigit

    Hey,

    Your text is not wrapped inside Span tags. Please wrap the text you would like to display as tooltip in Span tags as following 

    
<a href="#" class="tip">Link<span>This is the CSS tooltip showing up when you mouse over the link</span></a>

    Cheers!
    Yigit

    November 30, 2020 at 4:39 pm #1264016
    rvga

    Damn’it.
    With the <span> tag it works just fine, thx

    I’ve tried to play around with the parameters but couldn’t figure out how to change the text color and the bg color….
    Any advices

    November 30, 2020 at 4:47 pm #1264019
    Yigit

    Hi,

    Please add following code to bottom of Quick CSS field and adjust as needed

    a.tip span {
    color: orange;
    background-color: red !important;
}

    Regards,
    Yigit

    November 30, 2020 at 5:22 pm #1264033
    rvga

    Thx for the last tip Yigit. I will do some trials later to see the best tooltip I can design.

    I really want to thank you Yigit – you and all the rest of the support team.
    I just wanted to let you know that your help is extremely valuable to me and probably to many other people who like me are not developers.

    With your help I can ‘almost’ manage myself to make a better site using Enfold.
    Congrats to all of you.

    November 30, 2020 at 6:15 pm #1264040
    Yigit

    Hi,

    You are welcome and thank you for your kind message! We really appreciate it :)
    We are always here ready to help so if you have any other questions or issues, please feel free to start new threads :)

    Best regards,
    Yigit

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • The topic ‘Customising the title attribute of a text link’ is closed to new replies.