发表新帖
发表新帖

Suppress Link Titles

前端 未结
关注
6 1518
甜味超标
甜味超标 2021-01-13 21:25

Is there any way to suppress the pop-up titles on links, yet still keep them on the page for the visually impaired?

相关标签:
6条回答
  • 粉色の甜心
    2021-01-13 22:03

    Links in my browser don't show tool-tips like that unless they have a title attribute.

    If you want, you could use Greasemonkey to run this bit of javascript on evey page to remove them.

    var anchorTags;
anchorTags = document.getElementsByTagName("a");
for(var i = 0; i < anchorTags.length; i++) {
  anchorTags[i].removeAttribute("title");
}
    0 讨论(0)
  • 不知归路
    2021-01-13 22:13

    I had this issue with a project where the client wanted to display their own tooltip (which was done with CSS) but it was also showing because of the browser-initiated tooltip also, so it showed twice. We got around this by removing the 'title' attribute and instead using 'data' to populate the text in the CSS.

    I'm not sure what you mean as keeping them on the page for the visually impaired, as they're only visible in the source code?

    For example:

    <a href="link" title="something">Link title here</a>

    would show the link 'Link title here' on the page as well as the annoying popup when you hover on it.

    <a href="link" data="something">Link title here</a>

    would show the link 'Link title here' but would NOT show the annoying popup on hovering, though you can still use the data tag to reference whatever you want to put there (in our case, we put the text for the tooltip for the CSS to refer to).

    Obviously if you remove the title tag completely the issue is resolved, but you said you needed to keep it there so this is my workaround as used before.

    0 讨论(0)
  • 时光说笑
    2021-01-13 22:15

    I know this has been resolved but I also found this workaround: Hide native tooltip using jQuery

    0 讨论(0)
  • 灰色年华
    2021-01-13 22:15

    This works in jQuery.

    var val;
$('[YOUR_SELECTOR]').hover(function() {
    val = $(this).attr('title');
    $(this).removeAttr('title');
  },function() {
    $(this).attr('title',val);
})
    0 讨论(0)
  • 攒了一身酷
    2021-01-13 22:15

    ...it possibly wouldn't be ideal, but you could always try, in place of a title attribute in the <a href>, a <span> within the <a> tags:

    /* screen.css */

a   { }

a span.titleText {
    display: none;
    position: absolute;
    bottom: 1.2em;
    left: 0;
}

a:hover span.titleText,
a:active span.titleText,
a:focus span.titleText {
    display: block;
}

/* audio.css */

a span {
    display: inline; /* or whatever the relevant attribute would 
                        be in an audio stylesheet. */
}

    <head>
    <link href="screen.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="audio.css" type="text/css" rel="stylesheet" media="screen-reader, audio" />
</head>

<a href="http://some.url.com">
    <span class="titleText">This is the title</span>This is the link
</a>

    I don't, however, suggest it as a particularly practical solution. And I'm fairly certain it wouldn't validate. If I knew JS I'd suggest something more workable, but even then I'm not convinced it would work.

    0 讨论(0)
  • 深忆病人
    2021-01-13 22:26

    That's a function of the browser to interpret the link title and display a tooltip/popup. There's no way to suppress them. I tried (because a client didn't like them either) and there's no way around them.

    0 讨论(0)
 看不清?
提交回复
热议问题