De tooltip configureren

Om informatie op een kaart, op een afbeelding of in een kalender weer te geven, kan u een tooltip configureren. U kan de standaard tooltip gebruiken en configureren of deze nauwkeuriger personaliseren door gebruik te maken van een aanpasbare HTML-tooltip. Een aanpasbare tooltip is meer tijdrovend maar is een goede manier om uw data in de kijker te plaatsen. Om over te schakelen van de configuratie-interface voor standaard tooltips naar deze aanpasbare weergave van de tooltip, selecteer de Custom HTML template in het afrolmenu met types tooltips.

Standaard tooltip

Vanzelfsprekend kan u configureren welke velden in de tooltip verschijnen en wat de relatieve volgorde ervan is. Een live voorbeeldweergave is beschikbaar aan de rechterzijde.

Voor elk van de velden van de tooltip, zijn de 3 volgende acties beschikbaar:

../../../_images/tooltip__actions.png

Acties met betrekking tot velden van de tooltip

  • Sleep en plaats om een veld binnen de tooltip te verplaatsen

  • Klik om het veld uit de tooltip te verwijderen

  • Klik om een veld aan de tooltip toe te voegen

Custom HTML tooltip

Wanneer u Custom HTML tooltip selecteert, verschijnt een HTML editor. Dit vertoont veel gelijkenissen met het schrijven van "pagina's" in uw domein; u heeft toegang tot elke ODS Widget en u kunt zelfs andere weergaves in de tooltip integreren. U kunt zelfs de raster lay-out klassen gebruiken.

Wanneer de tooltip wordt weergegeven, kan deze toegang krijgen tot een specifieke "record" variabele die wordt "geïnjecteerd" in de tooltip. Dit "record"-voorwerp bevat de volgende eigenschappen:

  • record.fields: voorwerp dat alle waarden bevat (bijv.``record.fields.tree_height``)

  • record.recordid: unieke identifier voor het record

  • record.datasetid: identifier van de dataset

Door gebruik te maken van deze eigenschappen, kan u rechtstreeks waarden in de tooltip weergeven of deze zelfs gebruiken om data uit andere datasets weer te geven.

Het schema van de dataset wordt ook geïnjecteerd als een variabele "velden". Dit is een waaier aan veldvoorwerpen (u kan ng-repeat om de velden te overlopen). Een veldvoorwerp bevat de volgende eigenschappen:

  • field.name: de identifier van het veld. Bijvoorbeeld om een waarde te vinden in record.fields

  • field.type: het type veld (tekst, decimaal, geheel getal, datum, datumtijd, geo_point_2d, geo_shape)

  • field.label: een mensvriendelijk label

Hier is de code uit het bovenstaande voorbeeld:

<ul style="display: block; list-style-type: none; color: #2c3f56; padding:0; margin:0;">
    <li><strong style="font-size:17px;">{{ record.fields.name | limitTo:25 }}</strong></li>
    <li>{{ record.fields.organisation | limitTo:40}}</li>
    <li ng-if="record.fields.description" style="color:#bbb;">{{ record.fields.description | limitTo:140 }}</li>
    <li ng-if="!record.fields.description" style="font-style:italic;color:#bbb;">No description provided<br/></li>
    <br/>
    <li ng-if="record.fields.has_issue == 'TRUE'" style="color:#ec643c;"><i class="fa fa-exclamation-triangle"></i> An issue has been reported on this  portal</li>
    <li>
        <ul style="list-style-type: none; color: #2c3f56;padding:0 0 15px;margin-top:0px;">
            <li style="display: inline;float:left;"><strong style="font-size:13px;"><a ng-href="https://docs.google.com/forms/  d/1-9m30rCw492oGCB7Pg3aOsZ-q03KBeJsw_GZFLqIvNE/   viewform?entry.1740897944={{record.fields.name}}&amp;entry.1624486384={{record.fields.url}}&amp;entry.462034829&amp;entry.848235220"   style="color:#ccc;" target="_blank">Report an issue </a></strong><i class="fa fa-external-link" style="color:#ccc;"></i></li>
            <li style="display: inline;float:right;"><strong style="font-size:13px;"><a ng-href="{{record.fields.url}}" style="color:#ec643c;"  target="_blank">Open this portal </a></strong><i class="fa fa-external-link" style="color:#ec643c;"></i></li>
        </ul>
    </li>
</ul>

Indien u een afbeelding uit een van de "bestand"-velden van uw dataset wil weergeven, kan u de widget ods-record-image gebruiken.

U kan een <ods-dataset-context> gebruiken om een weergave uit een andere dataset weer te geven; in het volgende voorbeeld is de data genomen uit een andere dataset en gefilterd op basis van één van de waarden van het geselecteerde record.

<div class="my-tooltip">
    <!-- Display the name of the city directly from the point that the user selected -->
    <h1>City report : {{ record.fields.city_name }}</h1>

    <!-- Display an image from the dataset -->
    <ods-record-image field="city_logo" record="record"></ods-record-image>

    <!-- Create a context reading data from another dataset but filtered on
         the city that the user clicked on -->
    <ods-dataset-context context="alerts"
                         alerts-dataset="city-alerts-realtime"
                         alerts-parameters="{'refine.city': city_name}">
        <ods-table context="alerts"></ods-table>
    </ods-dataset-context>
</div>