Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales.

PHOTO

Thu Jun 22 2023 22:11:33 GMT+0000 (Coordinated Universal Time)

Saved by @marcton #html5 #"title #tooltip

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

    </style>
</head>
<body>
    <div class="tooltip">Hover over me
        <span class="tooltiptext">Tooltip text</span>
      </div>
</body>
</html>

COPY

Save snippets that work from anywhere online with our extensions

Comments

Curiosidades html5

@marcton

Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales.

#html5 #"title #tooltip

Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

    </style>
</head>
<body>
    <div class="tooltip">Hover over me
        <span class="tooltiptext">Tooltip text</span>
      </div>
</body>
</html>

#html #htmltags #webdev #basics #html5

Image tag <img> to insert images

<img 
	src="example.com/cat.png" 
    alt="Photo of a cat" 
    height="50" 
    width="100"
    longdesc="#catDetails"
 >

#html5 #css

NOT A CODE BUT A REMINDER FOR RESPONSIVE WEBSITE

Pixels are static values which may work for certain dimensions but will cause problems and hinder design at different dimensions/views(mobile-desktop)

For responsive web design it is a must to follow certain design practices :

1- No Pinch Zoom: Solved by applying viewport correctly.
2- No Horizontal Scrolling: Solved by using relative sizing and positioning and instead of absolute positioning.
3- Font-size Handling: Use em and rems instead of pixels.
4- Layout: Use Media Queries,Flexboxes, Bootstrap etc.

#html #css #javascript #html5

Código css para un estilo general del reloj digital sombra-1

  <style>
      * {
          box-sizing: border-box;
      }
      
      @font-face {
          font-family: 'ds-digital';
          src: url('./ds_digital/DS-DIGII.TTF');
      }
      body {
          
      }
      #relojillo {
          width: fit-content;
          height: auto;
          position: relative;
          background-image: linear-gradient(232deg, #888, #888, #888);
          margin: auto auto;
          text-align: center;
          background-color: transparent;
          padding: 10% 10%;
      }
      
      #relojillo h1,
      #relojillo h2,
      #relojillo h3 {
          display: inline-block;
          font-family: 'ds-digital';
          font-size: 43pt;
          text-shadow: 0vw -3vw .1vw #999, -.3vw 4vw .1vw #f0f8ff;
          color: khaki;
          padding: 0vw .2vw;
      }
      #relojillo h3 {
          font-size: 21pt !important;
          text-shadow: 0vw -3vw .1vw orange, -.3vw 4vw .1vw orange;
      }
  </style>

#html #css #javascript #html5

Código html necesario para insertar el reloj digital sombra-1

<body>
    <aside id="elReloj"></aside>
    <script src="js/digital02.js"></script>
</body>

#html #css #javascript #html5

Código javascript para crear un reloj digital formato 24h sombra-1

function digital() {
    let laHora = new Date();

    let horas = laHora.getHours();

    if (horas < 10) {
        horas = "0" + horas;
    }


    let minutos = laHora.getMinutes();

    if (minutos < 10) {
        minutos = "0" + minutos;
    }


    let segundos = laHora.getSeconds();

    if (segundos < 10) {
        segundos = "0" + segundos;
    }


    const reloj = `<aside id="relojillo"><h1>${horas} : </h1> <h2>${minutos}</h2><sup><h3> : ${segundos}</h3></sup></aside>`;

    const salida = document.getElementById("elReloj").innerHTML = reloj;

    setTimeout(digital, 1000);


    return salida;
}
digital();

#html #css #javascript #html5

link del cdn cdnfonts.com para conseguir la tipografía DS-Digital

<link href="https://fonts.cdnfonts.com/css/ds-digital" rel="stylesheet">

#css #html5

Código css para obtener texto, letras o frases multicolor o de varios colores

[selector] {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(rgb(44, 42, 42),
            rgba(240, 255, 255, 0.767),
            rgb(44, 42, 42),
            rgba(245, 245, 220, 0.747),
            rgb(44, 42, 42),
            rgba(255, 166, 0, 0.89),
            rgb(44, 42, 42),
            rgba(220, 20, 60, 0.822),
            rgb(44, 42, 42));
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#html5 #javascript

Función javascript que obtiene y muestra la fecha actual

function fetxa() {
    const diasSemana = ["Domingo", "Lunes", "Martes", "Miércoles", "Jueves", "Viernes", "Sábado"];
    const meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Júnio", "Júlio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
    var fexa = new Date();
    var hoy = diasSemana[fexa.getUTCDay()];
    var dia = fexa.getUTCDate();
    var mes = meses[fexa.getUTCMonth()];
    var any = fexa.getUTCFullYear();

    document.getElementById("fecha").innerHTML = `<span>${hoy} ${dia}, del mes de ${mes} del ${any}</span>`;
    
}

#html5 #javascript

Código html para mostrar la fecha

<div id="fecha"></div>

<script src="js/fecha.js"></script>

#html5 #css

Estilos css para la fecha o calendario de texto

#fecha {
    font-family: 'frijole';
    color: navy;
    background-image: linear-gradient(orange,
            fuchsia,
            springgreen,
            fuchsia,
            dodgerblue,
            springgreen,
            fuchsia,
            orange,
            orange,
            fuchsia,
            springgreen);
    background-repeat: no-repeat;
    background-size: cover;
    background-size: cover;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
}

#bootstrap #hover #tooltip

Pure CSS card hover effect with clip path property

https://bbbootstrap.com/snippets/card-hover-effect-clip-apth-property-57463451

#tooltip #info #header #java

Tooltip

<!-- jQuery -->
<script src="//code.jquery.com/jquery-latest.js"></script>
<!-- Popper -->
<script src="https://unpkg.com/@popperjs/core@2"></script>
<!-- Tippy -->
<script src="https://unpkg.com/tippy.js@6"></script>

<script language="javascript">
// This code will execute as soon as the document is loaded 
$(document).ready(function() {
    // Allow or disallow html in tooltips (default = false)
    tippy.setDefaultProps({allowHTML: true}); 
    // Transform elements
    let tooltip_elements = $('a[href^="#tooltip_"]');
    tooltip_elements.each(function(i){
        let link = $(this).attr('href');
        let tip = link.replace('#tooltip_', '');
        $(this).attr('data-tippy-content', tip);
        if (link.startsWith('#tooltip_')) {
          $(this).removeAttr('href').css('cursor', 'pointer');
        }
    });
    // Finally, call `tippy`
    tippy('[data-tippy-content]');
});</script>

#tooltip #info #header #java

Tooltip - Styling

/* ----------------------------------------
Note: any modifications to these styles will be global 
---------------------------------------- */
.tippy-box {}
.tippy-content {}
.tippy-arrow {}

/* ----------------------------------------
You can also apply tooltip css overrides on the INTERIOR of your tooltips. Note: results may sometimes be unpredictable 😡
---------------------------------------- */
.tippy-box .style1 {
  font-family: courier;
  color: #0066FF;
  padding: 15px;
  display: inline-block;
}

#tooltip #snippet #wp

Tooltip – Documentation – Shortcodes Ultimate

[su_tooltip title="Tooltip title" text="Tooltip content" position="top" background="#222222" color="#FFFFFF" font_size="16" text_align="left" max_width="300" radius="5" shadow="no" behavior="hover" class="" outline="yes" tabindex="yes" reference_tag="span" hide_delay="0"] Hover me to open tooltip [/su_tooltip]

Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales.

Save snippets that work from anywhere online with our extensions

Comments

More like this

Curiosidades html5

Browse more snippets >>

Código html5 que reproduce un tooltip situado en cada uno de los 4 puntos cardinales principales.

Save snippets that work from anywhere online with our extensions

Comments

More like this

Curiosidades html5

Browse more snippets >>

Embed code snippet