«

17.9.2011 19:18, Tim Streater wrote:

> I think you didn't read what I wrote.

I did. But I didn't read your mind clearly enough (just the general
picture, not the specifics), and I only commented on what you wrote, not
what I extracted via ESP.

> The arbitrary html, having
> arrived, is stored locally. For later display, it is then massaged by a
> PHP script before being handed to a browser.

So this is far from doing things in CSS only.

> This is not a website,
> hence no URL. It's an *application*.

Too bad. If you want others to help you, you need to give them access to
the application one way or another.

> So obviously the PHP script has to:
>
> a) add the <span> somewhere before the </a> and the class just before
> the end of the <a>.

Does it? Why are you doing this? If you are about to do something with
_all_ <a> elements, like adding some content from its attributes as
visible somewhere, then natural approach, now in the 2010s, would really
be a CSS-only approach, using generated content. But you haven't
disclosed anything about the usage environment, so it's impossible to
say whether using
:link:after, :visited:after { content: attr(href) ... }
- with suitable styling added of course - would be feasible.

> Obviously before modifying my app to provide this new feature, I created
> a small test, to see how it might work and adjusted the CSS until it
> looked good to me.

So where did it go wrong?

> Here is my test, which illustrates the problem. You can copy/paste it to
> a file on your desktop and then double-click it.

You didn't bother helping to help you by providing an online URL.

> Here, both
> the link and the tip are underlined in blue.

The link is. The tip is not. Of course it can be somewhat difficult to
distinguish blue underlining from a black background, but astonishgly, I
was able to modify the background color suitably.

(You didn't tell which browsers in which environments you tested.)

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In article <j52m38$3me$>,
"Jukka K. Korpela" <> wrote:

> 17.9.2011 19:18, Tim Streater wrote:
>
> > I think you didn't read what I wrote.
>
> I did. But I didn't read your mind clearly enough (just the general
> picture, not the specifics), and I only commented on what you wrote, not
> what I extracted via ESP.
>
> > The arbitrary html, having
> > arrived, is stored locally. For later display, it is then massaged by a
> > PHP script before being handed to a browser.
>
> So this is far from doing things in CSS only.
>
> > This is not a website,
> > hence no URL. It's an *application*.
>
> Too bad. If you want others to help you, you need to give them access to
> the application one way or another.

You running OS X? And are you proposing to wade through all 15k lines of
javaScript and 10k lines of PHP? Why d'you think I posted a simple
example?

> > So obviously the PHP script has to:
> >
> > a) add the <span> somewhere before the </a> and the class just before
> > the end of the <a>.
>
> Does it? Why are you doing this?

To add a tooltip.

> If you are about to do something with
> _all_ <a> elements, like adding some content from its attributes as
> visible somewhere, then natural approach, now in the 2010s, would really
> be a CSS-only approach, using generated content. But you haven't
> disclosed anything about the usage environment, so it's impossible to
> say whether using
> :link:after, :visited:after { content: attr(href) ... }
> - with suitable styling added of course - would be feasible.
>
> > Obviously before modifying my app to provide this new feature, I created
> > a small test, to see how it might work and adjusted the CSS until it
> > looked good to me.
>
> So where did it go wrong?
>
> > Here is my test, which illustrates the problem. You can copy/paste it to
> > a file on your desktop and then double-click it.
>
> You didn't bother helping to help you by providing an online URL.
>
> > Here, both the link and the tip are underlined in blue.
>
> The link is. The tip is not.

Here it is. And when this method is incorporated in my app, the tip
always has the same text-decoration as the creator of the html caused
the link to have.

> Of course it can be somewhat difficult to
> distinguish blue underlining from a black background, but astonishgly, I
> was able to modify the background color suitably.
>
> (You didn't tell which browsers in which environments you tested.)

Yes I did. Two or three posts ago. Now, do you have any useful
suggestions to make or are you going to nitpick all day?

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

17.9.2011 23:26, Tim Streater wrote:

>> (You didn't tell which browsers in which environments you tested.)
>
> Yes I did. Two or three posts ago.

And you would rather refer that way than list them down - as opposite to
your pointlessly extensive quotations from my texts. If you had listed
them down, you might have realized how useless it is to mention just
names of browsers. No version numbers, no platform info, etc. I could
have specified what I really tested, but it's you who needs help, yet
refuses to provide relevant information.

> Now, do you have any useful
> suggestions to make or are you going to nitpick all day?

The most useful suggestion would be to say that the approach is
pointless and most probably does not solve the unspecified problem you
have. The second in usefulness was my earlier suggestion to consider a
CSS-only approach. But apparently you have decided to discard useful advice.

The only useful thing that this messy discussion may have caused is that
some people may realize how relevant it is
1) to describe the problem (not just the assumed solution),
2) to illustrate the problem and approach to solving with with a URL or
to, and
3) to specify the browsers by version, platform, and possibly settings
as soon as it becomes clear that other people don't see the same thing
as you do even though they use the "same" browser.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

In article <j5330g$nmq$>,
"Jukka K. Korpela" <> wrote:

> 17.9.2011 23:26, Tim Streater wrote:
>
> >> (You didn't tell which browsers in which environments you tested.)
> >
> > Yes I did. Two or three posts ago.
>
> And you would rather refer that way than list them down - as opposite to
> your pointlessly extensive quotations from my texts. If you had listed
> them down, you might have realized how useless it is to mention just
> names of browsers. No version numbers, no platform info, etc. I could
> have specified what I really tested, but it's you who needs help, yet
> refuses to provide relevant information.

OK - OS X 10.7.1.

Safari 5.1
Firefox 6.0
iCab 4.7.0
Chrome 8.0.552.231
Opera 11.51

> The most useful suggestion would be to say that the approach is
> pointless and most probably does not solve the unspecified problem you
> have. The second in usefulness was my earlier suggestion to consider a
> CSS-only approach. But apparently you have decided to discard useful advice.

I am using a CSS-only approach. But given that the html I am given
contains the neither CSS required, nor the tip I'd like to be there,
then oddly enough I have to put it there. With PHP, as it happens.

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

In article
<timstreater->,
Tim Streater <> wrote:

> In article
> <dorayme->,
> dorayme <> wrote:
>
> > In article
> > <timstreater->,
> > Tim Streater <> wrote:
> >
....
> >
> > There are various bits that could be underlined or not
> > underlined. There is the main link and there are two parts of the
> > text that appears on hover, one is an intro to a path. ...
>
> The html I'm modifying is not mine, it arrives, is stored,...


Anyway, I have given you a few examples of what could be useful
to you all having the same basic idea behind it. Perhaps you did
not see the idea or dismissed my offering out of hand assuming it
could not possibly help you. Perhaps because I simplified your
example and you could not see the connection to it?

My idea was to remove any underlining on the link itself and to
style the children, this being the simplest, least confusing way.
By styling the link children, you give back the underlined
appearance of the original visible link text and you can vary the
hovering text as you wish, having it all not underlined or partly
underlined.

If you *really really* don't want to override the styling of the
"link itself" *in any way whatsoever*, then you will not want to
apply my suggestion. But why would you not want to do this in
respect at least to its probable text-decoration? You already add
things via your PHP to the link itself, so it is not quite so
that you cannot add an inline style or a class to the html of the
thing.

--
dorayme

In article
<dorayme->,
dorayme <> wrote:

> Anyway, I have given you a few examples of what could be useful
> to you all having the same basic idea behind it. Perhaps you did
> not see the idea or dismissed my offering out of hand assuming it
> could not possibly help you. Perhaps because I simplified your
> example and you could not see the connection to it?

Thanks for those examples but unfortunately there was no improvement.
Also, I've adopted the approach BootNic kindly mentioned in the link he
gave to an earlier thread. So I'm using an html-5 custom attribute
rather than the <span> now, which has simplified matters. But my tip
still gets the text-decoration of the link and in one instance the
line-height of the table cell in which the link sits (but that's easy to
fix).

> If you *really really* don't want to override the styling of the
> "link itself" *in any way whatsoever*, then you will not want to
> apply my suggestion. But why would you not want to do this in
> respect at least to its probable text-decoration? You already add
> things via your PHP to the link itself, so it is not quite so
> that you cannot add an inline style or a class to the html of the
> thing.

Since the html is arbitrary, I'm doing a number of things to sanitise it
that I didn't expect to need to, when I started this project. I thought
I could just shove the html in an iframe and let Safari get on with it.
Amongst others, I add target="_blank" to all links and ensure no href is
empty. I don't want to alter the style of the links, I want to control
the style of the tip. Overriding the line-height:0 seems to work in my
little test file but overriding the text-decoration does not.

I thought of re-installing Safari for Lion, but that seems not to be as
easy as I was expecting (the downloadable version is for SL). Anyway -
below is my latest test example. In Safari for 10.7.1, the tip gets the
same underline as the link.


<!DOCTYPE HTML>
<html>
<head>
<title>Pure CSS Tooltips</title>
<style type="text/css">

[data-phishtip]:hover
{
position: relative;
}

[data-phishtip]:hover:before
{
font-family: verdana;
font-size: 11px;
content: attr(data-phishtip);
position: absolute;
border-radius: 0.5em;
top: 2em;
left: 0.5em;
white-space: nowrap;
padding: 0.5em 1em 0.5em 1em;
background-color: black;
border: 2px solid black;
color: white;
z-index: 1000;
text-decoration: none;
line-height: 1em;
}

</style>
</head>

<body>
<div>
<p>Here we have some stuff.</p>
<p style="line-height: 0">What is a tooltip? <a
href="javascript:alert('Boo!');" data-phishtip="An
aiding text that appears just when you roll over with the
mouse">Boo-it</a>.</p>
<p>Here is more stuff and more and more and more and more<br>yet more
crap<br> new lines and so on.</p>
<p>Here is more stuff and more and more and more and more<br>yet more
crap<br> new lines and so on.</p>
</div>
</body>
</html>

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

In article
<timstreater->,
Tim Streater <> wrote:

> In article
> <dorayme->,
> dorayme <> wrote:
>
> > Anyway, I have given you a few examples of what could be useful
> > to you all having the same basic idea behind it. Perhaps you did
> > not see the idea or dismissed my offering out of hand assuming it
> > could not possibly help you. Perhaps because I simplified your
> > example and you could not see the connection to it?
>
> Thanks for those examples but unfortunately there was no improvement.

Why not? I offered you a way that controls the underlining, are
you saying it does not work or that you do not want to override
the underlining style of the given link (for a secret reason) and
then virtually putting it back?


> Also, I've adopted the approach BootNic kindly mentioned in the link he
> gave to an earlier thread. So I'm using an html-5 custom attribute
> rather than the <span> now, which has simplified matters.

I am not objecting to it But it does not work to do what you
particularly wanted? I see many lines of styling and you still
add something to the link element to hook into it.

....

> > If you *really really* don't want to override the styling of the
> > "link itself" *in any way whatsoever*, then you will not want to
> > apply my suggestion. But why would you not want to do this in
> > respect at least to its probable text-decoration? You already add
> > things via your PHP to the link itself, so it is not quite so
> > that you cannot add an inline style or a class to the html of the
> > thing.

You seem to avoid a direct answer to this? All you are required
to do is sanitise the link in respect to one particular style,
the underlining and then putting it back again as if nothing has
changed. Honestly, no one will know, it happens very quickly, the
browser is like a fast poker cheat. Why would you not want this
if it gives you the looks you want? Is there some relevant
technical reason?

>
> ... I don't want to alter the style of the links, I want to control
> the style of the tip.

Why not do both?

<http://dorayme.netweaver.com.au/toolTipLike.html>

The source of this is certainly not longer than your suggested
doc text which I have snipped.

--
dorayme

In article
<dorayme->,
dorayme <> wrote:

> In article
> <timstreater->,
> Tim Streater <> wrote:
>
> Why not? I offered you a way that controls the underlining, are
> you saying it does not work or that you do not want to override
> the underlining style of the given link (for a secret reason) and
> then virtually putting it back?

> > Also, I've adopted the approach BootNic kindly mentioned in the link he
> > gave to an earlier thread. So I'm using an html-5 custom attribute
> > rather than the <span> now, which has simplified matters.
>
> I am not objecting to it But it does not work to do what you
> particularly wanted? I see many lines of styling and you still
> add something to the link element to hook into it.

But I'm doing considerably less work now than with the first attempt.
And I'm not adding a <span> to the link text, which avoids having to
worry about the case where there is already a <span> there. As in this
(real life) example of link text:

<a etc etc>Shop <span>Now</span></a>

> You seem to avoid a direct answer to this? All you are required
> to do is sanitise the link in respect to one particular style,
> the underlining and then putting it back again as if nothing has
> changed. Honestly, no one will know, it happens very quickly, the
> browser is like a fast poker cheat. Why would you not want this
> if it gives you the looks you want? Is there some relevant
> technical reason?

> > ... I don't want to alter the style of the links, I want to control
> > the style of the tip.
>
> Why not do both?
>
> <http://dorayme.netweaver.com.au/toolTipLike.html>
>
> The source of this is certainly not longer than your suggested
> doc text which I have snipped.

The text-decoration that the link comes with could be one of a number of
options; I don't want to just remove it, and put it back as underline.
And in your example, you've added:

a {text-decoration: none;}

How does that play with:

a {text-decoration: line-through;}

that may for all I know appear elsewhere in the html?

Did you try the example I posted in my previous post? All the browsers I
listed fail one way or another. Safari, iCab and Chrome don't respect
the text-decoration. Firefox does but is confused by the line-height:0
in the example; when I mouse over, the rest of the rendered text shifts
down. Chrome works well but the second tip does not disappear when I
mouse out.

Why are the webkit-based browsers ignoring the text-decoration:none
styling?

--
Tim

"That excessive bail ought not to be required, nor excessive fines imposed,
nor cruel and unusual punishments inflicted" -- Bill of Rights 1689

In article
<timstreater->,
Tim Streater <> wrote:

> > <http://dorayme.netweaver.com.au/toolTipLike.html>
> >
> > The source of this is certainly not longer than your suggested
> > doc text which I have snipped.
>
> The text-decoration that the link comes with could be one of a number of
> options; I don't want to just remove it, and put it back as underline.
> And in your example, you've added:
>
> a {text-decoration: none;}
>
> How does that play with:
>
> a {text-decoration: line-through;}
>
> that may for all I know appear elsewhere in the html?

Yes, good point. Your aim is to have a general mechanism. If you
could know in advance, you could, of course, put

..visibleLinkText {text-decoration: line-through;}

instead. Perhaps, if you are so concerned (not sure why?) with
allowing links simply to be underlined (how often would they be
text-dec other than underline?), you might consider js to sus out
how the link is in this regard and then apply the appropriate
counter-measure as above.

Anyway, this css way has the further fault of if the css is off,
it looks a bit disastrous, some tool tip way is probably superior
but I would not raise your hopes of being able to style it to
your heart's content, it being pretty browser dependent.


>
> Did you try the example I posted in my previous post? All the browsers I
> listed fail one way or another. Safari, iCab and Chrome don't respect
> the text-decoration. Firefox does but is confused by the line-height:0
> in the example; when I mouse over, the rest of the rendered text shifts
> down. Chrome works well but the second tip does not disappear when I
> mouse out.
>
> Why are the webkit-based browsers ignoring the text-decoration:none
> styling?

You talking the one that goes

<!DOCTYPE HTML>
<html>
<head>
<title>Pure CSS Tooltips</title>
<style type="text/css">

[data-phishtip]:hover


?

I have had a brief look. If you put the text dec none style on the

[data-phishtip]:hover

instead of (or I s'pose in addition to) on

[data-phishtip]:hover:before

You will get Safari to not have underlining on the tooltip text.
Perhaps that is all you want.

* Have you seen what happens to the tooltip in Opera? The tooltip
becomes very thin and tall and the text goes down it in a fairly
unreadable manner.

* In Safari and FF and iCab it gets cut off at large text sizes,
the scrollbar across being useless because to get to it one needs
to stop hovering! Your 'white-space: nowrap' is not helping in
this.

Try the fix I suggest a few inches above if Safari is your thing.

--
dorayme

In article
<timstreater->,
Tim Streater <> wrote:

> In article
> <dorayme->,
> dorayme <> wrote:
>
> > In article
> > <timstreater->,
> > Tim Streater <> wrote:
>
> > > Did you try the example I posted in my previous post? All the browsers I
> > > listed fail one way or another. Safari, iCab and Chrome don't respect
> > > the text-decoration. Firefox does but is confused by the line-height:0
> > > in the example; when I mouse over, the rest of the rendered text shifts
> > > down. Chrome works well but the second tip does not disappear when I
> > > mouse out.
> > >
> > > Why are the webkit-based browsers ignoring the text-decoration:none
> > > styling?
>
> > I have had a brief look. If you put the text dec none style on the
> >
> > [data-phishtip]:hover
> >
> > instead of (or I s'pose in addition to) on
> >
> > [data-phishtip]:hover:before
> >
> > You will get Safari to not have underlining on the tooltip text.
> > Perhaps that is all you want.
>
> It is (as Safari is a *component* of my app). That fixes the example -
> thanks - and many instances too in the "real-life" html but it looks
> like that if the link has an inline style for text dec underline then
> that defeats your fix <sob>.
>

Now now, don't cry, Auntie Dora has something more for you on
this, young man:

[data-phishtip]:hover {
....
text-decoration: none !important;
}

--
dorayme