UDT - Tooltip

Tobias_Gl · 24. Dezember 2010 21:48

Dieser UDT ist eine Abwandlung des Acroynm_replayer.
Der UDT-Tooltip durchsucht genau wie der Acronym_replayer den Content nach vordefinierten Buchstabenketten und wandelt diese dann um.
Die gefundene Wortkette wird in einem Link gesetzt und darauf eine folge von Span-Elementen gesetzt, welche eine Sprechblase zeichnen in der die definierte Beschriftung steht.

UDT-Tooltip

Hier klicken, um den Code zum Kopieren zu markieren

$text = $params['thepagecontent'];
global $tooltip;
// "tt" => "definition",

if( empty($tooltip) ) {
   $tooltip = array(
         "CMSms" => "CMS made simple",
         "UDT" => "Benutzerdefinierter Tag ",
      );
   }
   foreach($tooltip as $tt => $description) {

      $text = preg_replace("|(?!<[^<>]*?)(?<![?./&])\b$tt\b(?!:)(?![^<>]*?>)|imsU","<a href=\"#\" class=\"tt\">$tt<span class=\"tooltip\"><span class=\"top\"></span><span class=\"middle\"> $description </span><span class=\"bottom\"></span></span></a>" , $text);
      $text = preg_replace("|[$]<a href=\"#\" class=\"tt\">$tooltip<span class=\"tooltip\"><span class=\"top\"></span><span class=\"middle\"> $description </span><span class=\"bottom\"></span></span></a>[$]|imsU" , "$tt" , $text);

   }
return trim( $text );

Damit auch der Tooltip richtig angezeigt werden kann muss man alle span Elemente noch per CSS definieren.

CSS:

Hier klicken, um den Code zum Kopieren zu markieren

a.tt{
    position:relative;
    z-index:24;
    color:#3CA3FF;
    font-weight:bold;
    text-decoration:none;
}
a.tt span{ display: none; }

/*background:; ie hack, something must be changed in a for ie to execute it*/
a.tt:hover{ z-index:25; color: #aaaaff; background:;}
a.tt:hover span.tooltip{
    display:block;
    position:absolute;
    top:0px; left:0;
        padding: 15px 0 0 0;
        width:200px;
        color: #993300;
    text-align: center;
        filter: alpha(opacity:90);
        KHTMLOpacity: 0.90;
        MozOpacity: 0.90;
        opacity: 0.90;
}
a.tt:hover span.top{
        display: block;
        padding: 30px 8px 0;
    background: url(bubble.gif) no-repeat top;
}
a.tt:hover span.middle{ /* different middle bg for stretch */
        display: block;
        padding: 0 8px;
        background: url(bubble_filler.gif) repeat bottom;
}
a.tt:hover span.bottom{
        display: block;
        padding:3px 8px 10px;
        color: #548912;
    background: url(bubble.gif) no-repeat bottom;
}

Durch diese CSS deklaration wird der definierte Text erst bei dem mouseover angezeigt. Es werden 2 Grafiken verwendet um die Sprechblase zu bilden.

Demo und Quelle des Tooltips ist: http://trentrichardson.com/examples/csstooltips/
dort können auch die Grafiken heruntergeladen werden smile

Beitrag geändert von Tobias_Gl (24. Dezember 2010 22:00)

nockenfell · 25. Dezember 2010 11:18

Danke für den UDT. Zusammen mit einer FAQ Datenbank wäre dies ein interessanter für eine Supportseite.

piratos · 25. Dezember 2010 12:48

Es führen viele Wege nach Rom - einer wäre die Nutzung eines Modifierers:

Hier klicken, um den Code zum Kopieren zu markieren

<?php

function smarty_modifier_tooltip($string, $tip = '')
{
        return $string.'<span class="tooltip"><span class="top"></span><span class="middle">'.$tip.'</span><span class="bottom"></span></span>';
}

?>

So etwas wirkt auf Smarty . Variable.

CSS wie vorher gepostet - Einsatz als Beispiel:

Hier klicken, um den Code zum Kopieren zu markieren

{assign var='Hinweis' value='Hinweis'}
<a href="#" class="tt">{$Hinweis|tooltip:'Das ist ein Tooltip'}</a>

Edit. Da der If Teil trivial war habe ich den entfernt.

Beitrag geändert von piratos (25. Dezember 2010 13:33)

Andynium · 25. Dezember 2010 13:29

Dafür gabs auch schon mal ein Modul

http://dev.cmsmadesimple.org/projects/tagrep

was aber sicherlich nicht mehr funktioniert ...

Tobias_Gl · 25. Dezember 2010 19:42

nockenfell schrieb:

Danke für den UDT. Zusammen mit einer FAQ Datenbank wäre dies ein interessanter für eine Supportseite.

Ja dort kann man sowas Beispielsweise einbinden.
Ich persönlich verwende es nicht, aber ich habe es schon auf vielen Seiten gesehen. Ich verwende nur etwas sehr ähnliches auf einer Typo3 Seite - aber das ist ja eine etwas andere Baustelle wink

Andynium · 26. Dezember 2010 13:24

nockenfell schrieb:

Danke für den UDT. Zusammen mit einer FAQ Datenbank wäre dies ein interessanter für eine Supportseite.

Im Wiki auf der .org gibt's ja für UDT's eine eigene Seite.

Ist nun die Frage, ob ich hier im Forum ein separates Board für derartige UDT's einrichte oder im deutschen Wiki (in Planung)?!

Meinungen?

Connie · 27. Dezember 2010 12:26

Das ist eine schwierige Entscheidung.

Wie wäre es damit:

die UDTs in ein WIKI
in einem UDT-Board UDTs ankündigen und diskutieren?

Ich fände ein Board praktisch für Nachfragen, Infos und Hilfen
aber die UDT's selbst an zentraler Stelle (nicht so wie im org, wos mal hier und mal da oder gar nicht zu finden ist!)

Gruss, Connie

Andynium · 28. Dezember 2010 07:37

Connie schrieb:

Wie wäre es damit:
die UDTs in ein WIKI
in einem UDT-Board UDTs ankündigen und diskutieren?

Klingt logisch für mich ... habs gleich erledigt wink .

Wiki kommt etwas später ...

Cherry · 28. Dezember 2010 08:57

Connie schrieb:

die UDTs in ein WIKI
in einem UDT-Board UDTs ankündigen und diskutieren?

Mir würde das so auch gefallen.

nhaack · 06. Januar 2011 01:34

Connie schrieb:

die UDTs in ein WIKI
in einem UDT-Board UDTs ankündigen und diskutieren?

Mir auch smile

phpman · 02. Juni 2012 11:21

Hallo zusammen,

sorry das ich diese alte Diskussion wieder aufnehme. Würde das gern einsetzen weiss aber zum
einen nicht ob das mit v1.10.3 noch funktioniert und wie ich diese UDT im System Installieren muss da ich leider ausser dem Source code keine Anleitung auf der Seite finden konnte.

Hoffe Ihr könnt mir weiterhelfen.

Danke.

Gruß, PHPman

Cherry · 02. Juni 2012 14:41

UDT steht für UserDefined Tags = benutzerdefinierte Tags.
Die findest du unter Erweiterungen.
Erstelle dort einfach einen neuen UDT und kopiere den Code dort hinein.

Ob das dann noch funktioniert kann ich dir leider nicht beantworten.

phpman · 02. Juni 2012 20:30

okay, dann hab ich das mit dem "UDT" soweit verstanden. Gibt es eine alternative Lösung für diese "tooltips" funktion ?

Was ich bei den TAGS gesehen habe ist, das es halt wie Du schreibst immer eine "php datei" ist in dem Fall s.o. (tooltip) besteht das aus "html seite, grafik und js files" und mehreren Unterverzeichnissen. Konnte keine Info finden wie das von den im plugin verzeichnis gelesen wird order nicht.

@ All kann jemand hier helfen???

Andynium · 03. Juni 2012 19:17

Der UDT sollte eigentlich noch funktionieren - der Code des UDT wird in der Datenbank abgelegt.

Wie du daraus einen klassischen CMSMS Tag machst, findest du hier

http://www.cmsmadesimple.de/dokumentati … ndeln.html

Cherry · 03. Juni 2012 20:05

also als erstes erstellst du einen neuen UDT. Nenne ihn tooltip und kopiere den Codeschnipsel aus dem Forum hier dorthinein.

Danach kommt das css dran:
Gehe unter Layout Stylesheets und erstelle ein neues Stylesheet. Nenne es z.B. Tooltip.
Kopiere den CSS Codeschnipsel von oben dorthin.
Verbinde das neue Stylesheet mi deinem Layout:
[Layout auswählen, auf das css Symbol klicken, im dropdown dein neues Stylesheet auswählen, hinzufügen]

Jetzt das Layout Template öffnen.
Dort suchst du den {conten} tag.

Ersetze ihn mit diesen beiden Zeilen:
{content assign=pagecontent}
{tooltip thepagecontent="$pagecontent"}.
Achte hier darauf dass tooltip genauso geschrieben wird wie du ihn benannt hast (Groß/ Kleinschreibung ist wichtig).

Lösche jetzt vorsichtshalber mal den Cache.
[Webseitenadministration>Globale Einstellungen>Weitere Einstellungen>Zwischenspeicher löschen]

Rufe jetzt eine Seite auf, dann sollte jetzt das Wort 'cmsms' bzw 'UDT' mit einem Tooltiplink angezeigt werden.
[Weil das im UDT oben so definiert wurde]

So... jetzt fehlen noch die Bilder. Die bekommst du, wenn du dem Link im oberen Beitrag folgst. Kopiere sie nach images oder wo du die sonst haben möchtest. Dann editierst du noch die Tooltip css und änderst die Bildpfade, damit diese auch gefunden werden.
Aus url(bubble.gif) machst du also url(/images/bubble.gif) oder so ähnlich.

Sämtliche Cache leeeren ( CMSms , Browser) und es sollte laufen.

Eigene Tooltips schreibst du in den UDT an dieser Stelle:

$tooltip = array(
"CMSms" => "CMS made simple",
"UDT" => "Benutzerdefinierter Tag ",
"hier" => "der Tipp dazu",

);

hoffe, das hilft weiter....

Beitrag geändert von Cherry (03. Juni 2012 20:06)

Forum für CMS/made simple

#1 24. Dezember 2010 21:48

UDT - Tooltip

#2 25. Dezember 2010 11:18

Re: UDT - Tooltip

#3 25. Dezember 2010 12:48

Re: UDT - Tooltip

#4 25. Dezember 2010 13:29

Re: UDT - Tooltip

#5 25. Dezember 2010 19:42

Re: UDT - Tooltip

#6 26. Dezember 2010 13:24

Re: UDT - Tooltip

#7 27. Dezember 2010 12:26

Re: UDT - Tooltip

#8 28. Dezember 2010 07:37

Re: UDT - Tooltip

#9 28. Dezember 2010 08:57

Re: UDT - Tooltip

#10 06. Januar 2011 01:34

Re: UDT - Tooltip

#11 02. Juni 2012 11:21

Re: UDT - Tooltip

#12 02. Juni 2012 14:41

Re: UDT - Tooltip

#13 02. Juni 2012 20:30

Re: UDT - Tooltip

#14 03. Juni 2012 19:17

Re: UDT - Tooltip

#15 03. Juni 2012 20:05

Re: UDT - Tooltip

Fußzeile des Forums