basicdisplay revisions - Githubissues

funderburkjim commented 1 year ago

This issue intended to document revisions to basicdisplay arising during the changes of #95.

tooltip with n-attribute

The cdsl display system has had the ability to present 'local' tooltips for the <ab> abbreviation element. The syntax in the xxx.txt file is <ab n="TOOLTIP">ABBREV</ab>. The html for the tooltips is generated by basicdisplay.php, whose base form resides in csl-websanlexicon repository.

As mentioned in #95, it is convenient to have a similar facility for other elements E, with similar syntax in xxx.txt : <E n="TOOLTIP">ABBREV</E>.

basicdisplay.php now revised to allow local tooltips in this way for

<is> The 'wide-spaced' Sanskrit IAST text in PW and PWG dictionaries.
<bot> Scientific names of plants - any dictionary

funderburkjim commented 1 year ago

Local tooltip for `<bot>` element (pw)

wohl {%die Pflanze%} <bot n="Artemisia indica">A. i.</bot>

Local tooltip for `<is>` element (pw)

<lex>Adv.</lex> {%wie%} <is>Aṅgiras</is> {%oder die%} <is n="Aṅgiras">A.</is>

Andhrabharati commented 1 year ago

@funderburkjim

Is it possible to show the tooltip in italics? What kind of markup is needed for this?

<L>26275<pc>2045-2<k1>kARqapuzpa<k2>*kARqapuzpa<e>100
*{#kARqapuzpa#}¦
<div n="1">— 1〉 <lex>n.</lex> {%die Blüthe von <bot>Artemisia indica</bot>%}.
<div n="1">— 2〉 <lex>f.</lex> {#A#} wohl {%die Pflanze <bot n="Artemisia indica">A. i.</bot>%}
<LEND>

Pl. recall that the the bot strings are in italics, as well as in-line abbr.s in the pwk italics.

So, the expansion of these in-line abbr.s as well as the expansion of the <bot n=" strings should be shown in italics, in the same style as the non-abbr. strings of these two type.

funderburkjim commented 1 year ago

Is it possible to show the tooltip in italics?

For reference, the current html for that A.i. is

<span title="Artemisia indica" style="color: brown; text-decoration: none; border-bottom: 1px dotted #000;"> 
   <span style="color: brown">A. i.</span>
</span>

Note: the presence of nested spans looks like an inefficiency in the generated html. However, this has no impact on the question at hand.

Abstracting, we have html of form <elt title="TOOLTIP" style="STYLE">ELT-TEXT</span>. The STYLE value pertains to the ELT-TEXT.

So the question is how to style the title attribute.

There is some discussion at this stackoverflow posting.

From the first stackoverflow answer, it looks possible to change the style in which the TOOLTIP is displayed.

funderburkjim commented 1 year ago

a first experiment

You can try this (e.g. at the w3schools server: https://www.w3schools.com/html/tryit.asp?filename=tryhtml_default).

Note it does NOT display the span tooltip in italics. Can someone fix this?

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
a {
  position: relative;
  display: inline-block;
  margin-top: 20px;
}

a[title]:hover::after {
  content: attr(title);
  position: absolute;
  top: -100%;
  left: 0;
}

span[title]:hover::after {
  font-style: italic;
  color:red;
}
</style>
</head>
<body>

<a href="http://www.google.com/" title="Hello world!">
  Hover over me
</a>
<br/><br/>
<span title="is this tooltip italic?">Hover over this.</span>

</body>
</html>

Andhrabharati commented 11 months ago

Note it does NOT display the span tooltip in italics. Can someone fix this?

@funderburkjim

Pl. have a look at this

256314578-7563a941-b61e-4aa4-82ac-e6ed25e0ad86

Just asked ChatGPT for html tooltip in italics, and it gave some code, using which I've made this file-- italic_tooltips.txt

Now you may play around this for "CDSL usage".

funderburkjim commented 7 months ago

tooltip double vision

download the italics_tooltips.txt file mentioned in above comment
- change the filename to 'italics_tooltips.html'.
open italics_tooltips.html with browser

Here's what you will see:

funderburkjim commented 7 months ago

prompt engineering explains

the question

In your example, you use the 'data-tooltip' attribute, and this works as you said. However, if I use the 'title' attribute, then TWO tooltips are shown, one as styled in your example, and one with presumably the default tooltip styling. Why is this?

the answer

When you use both the title attribute and a custom data-tooltip attribute on an HTML element, you might encounter the behavior you described. Let me explain why this happens:

Default Browser Tooltip (Title Attribute):

The title attribute is a standard HTML attribute that browsers recognize natively. When you add a title attribute to an element (such as a ), the browser automatically displays a tooltip with the content of that attribute when you hover over the element. This default tooltip styling is provided by the browser itself, and you have limited control over its appearance (such as font size, color, or positioning). If you use both title and a custom data-tooltip, the browser shows its default tooltip alongside your custom one.

Custom Tooltip (data-tooltip Attribute):

The data-tooltip attribute is not a native HTML attribute but rather a custom attribute that you can define yourself. It doesn’t have any built-in behavior. To create a custom tooltip, you need to use CSS (as shown in my previous example) to style an element and display the tooltip content when the user hovers over it. The custom tooltip gives you more flexibility in terms of styling and positioning.

Why Both Tooltips Appear:

When you include both title and data-tooltip attributes on the same element, the browser displays both tooltips simultaneously. The native title tooltip appears first (with its default styling), followed by your custom tooltip (styled according to your CSS rules). This behavior is due to the way browsers handle these attributes independently.

Solution: Choose One or the Other:

To avoid the double tooltip issue, decide whether you want to use the native title tooltip or your custom tooltip. If you prefer the custom tooltip, remove the title attribute from your element. If you want to stick with the native tooltip, remove the custom data-tooltip attribute and associated CSS.

funderburkjim commented 7 months ago

double vision removed

italics_tooltip_0.html applies the solution, using 'titletip' custom attribute.

Result of opening this version in browser:

funderburkjim commented 7 months ago

Which tooltips to italicize?

In the italic_tooltips_0.html example, the 'Hover over me' tooltip gets the same (italic) styling, since it is also marked with the 'tooltip' class. A second concern is that the tooltip is 'truncated' since near the left edge.

If we change the css selectors from ".tooltip" to "i>span.tooltip", then the A.i. tooltip shows (since its \ element is a child of an \ element. However, the tooltip for the 'hover over me' element does not display at all. See italic_tooltips_1.html.

We can add a styling for tooltips in a \ which is not a child of \ by CSS selector :not(i)>span.tooltip. This is done in italic_tooltips_2.html. Here the non-italic tips differ only by using a 'normal' font.

sanskrit-lexicon / PWK

basicdisplay revisions #97

tooltip with n-attribute

Local tooltip for `<bot>` element (pw)

Local tooltip for `<is>` element (pw)

a first experiment

tooltip double vision

prompt engineering explains

the question

the answer

Default Browser Tooltip (Title Attribute):

Custom Tooltip (data-tooltip Attribute):

Why Both Tooltips Appear:

Solution: Choose One or the Other:

double vision removed

Which tooltips to italicize?

style comment request

sanskrit-lexicon / PWK

basicdisplay revisions #97

tooltip with n-attribute

Local tooltip for <bot> element (pw)

Local tooltip for <is> element (pw)

a first experiment

tooltip double vision

prompt engineering explains

the question

the answer

Default Browser Tooltip (Title Attribute):

Custom Tooltip (data-tooltip Attribute):

Why Both Tooltips Appear:

Solution: Choose One or the Other:

double vision removed

Which tooltips to italicize?

style comment request

Local tooltip for `<bot>` element (pw)

Local tooltip for `<is>` element (pw)