Keskustelu: Nettisivujen teko: Lisätietoa, kun kursori on sanan päällä

Thalassa [05.12.2013 14:21:16]

Eli nyt olisi hakusessa koodi, jolla voisi toteuttaa sen, että kun tavallisen tekstin/sanan päälle vie kursorin, ilmestyy siihen kursorin alle pieni boksi missä lisää tekstiä. Tällä voisi esim. tarkentaa jotain sanaa.

Mitenkäs tuon voisi toteuttaa? En nyt ollut varma tuosta HTML/PHP:stä mutta kokeillaan.

Metabolix [05.12.2013 14:24:10]

<span title="Hypertext Markup Language">HTML</span> on ihmeellinen kieli!

Yucca [06.12.2013 21:15:43]

Tarkoitat varmaan osoittimen (pointer) viemistä tekstin päälle. Kohdistin eli kursori (cursor) on eri asia, tyypillisesti kapea pystypalkki tekstikentässä tai muussa muokattavissa olevassa tekstissä.

Metabolixin ehdottama title-määrite on vanha tapa saada aikaan kuvaamasi ilmiö. Se on kuitenkin käytettävyydeltään surkea: pieni fonttikoko, joka ei ole sivuntekijän eikä normaalikäyttäjän muutettavissa, ja lisäksi teksti häviää muutaman sekunnin kuluttua. Tätä voisi luulla parodiaksi, ellei se olisi totta. Lisäksi asiassa on sekin puoli, jonka HTML5 CR mainitsee: “Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification (e.g. requiring a pointing device such as a mouse to cause a tooltip to appear, which excludes keyboard-only users and touch-only users, such as anyone with a modern phone or tablet).”

Nykyisin käytetäänkin yleensä CSS-työkaluvihjeitä. Googlaa lausekkeella "css tooltip".

p99o [07.12.2013 14:31:52]

Itse tein tällaisen joskus

html:

<!DOCTYPE html>
<head>
	<title>Helptext</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" ></script>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
    <script src="jquery.js" ></script>
</head>
<body>
<div id="helptext-show"></div>

<div class="hover-me helptext" data-helptext="Hello world!">Moi</div>


</body>
</html>

jQuery

$(document).ready(function () {


	var mouseX;
	var mouseY;
	$(document).mousemove(function(e) {
	   mouseX = e.pageX;
	   mouseY = e.pageY;
	});



	$('.helptext').mousemove(function() {
		var helptext = $(this).attr('data-helptext');
		$('#helptext-show').html(helptext);
		$('#helptext-show').css({'top':mouseY+5,'left':mouseX+5}).show(1);
		$('#helptext-show').css( 'cursor', 'default' );
	});
	$(".helptext").mouseout(function(){
		$('#helptext-show').fadeOut(50);
	});
});

css:

body {
font-family:Calibri;
}

#helptext-show {
padding:8px 13px;
background-color:rgba(10,10,10,0.80);
display:none;
position:fixed;
font-size:12px;
color:#ffffff;
border-radius:3px;
max-width:200px;
word-wrap:break-word;
z-index:100;
}

.hover-me {
padding:30px;
width:300px;
background-color:rgba(90,140,30,0.95);
}

Tulos on kutakuinkin tämän näköinen. print screenin takia cursori ei näy kuvassa. http://gyazo.com/9dc28f7fc59b4648a80e1d717b2a0a1e

teksi jonka halutaan näkyvän annetaan elementille näin

data-helptext="teksi tähän"

ja laita myös class="helptext"

The Alchemist [07.12.2013 15:00:34]

Ei ole mitään järkeä korvata title-attribuuttia html-dokumentissa jollain itse keksityllä data-helptextillä. Kannattaisi perehtyä semantiikkaan ja sen merkitykseen, mutta on tuolla vaikutusta käytännön asioihinkin. On parempi idea korvata title-attribuutti data-attribuutilla (vasta) ajonaikaisesti javascriptillä, tosin en ole varma, miten se vaikuttaa näytönlukijoiden toimintaan.

<p>Lorem <span class="tooltip" title="Hello, world!">ipsum</span> dolor sit amet.</p>

$(function() {
  $('.tooltip').on('mouseover', function() {
    var $t = $(this);
    if ($t.attr('title')) {
      $t.data('tooltip', $t.attr('title'));
      $t.removeAttr('title');
    }

    var text = $t.data('tooltip');
    displayTooltip(this, text);
  });
});

Mikäli tooltippeihin tarvitaan rikastekstiä, niin silloin ei kannata enää käyttää attribuuttia tekstin säilömiseen. Itse käyttäisin piilotettua elementtiä.

<p>
  Vestibulum fringilla tortor fermentum, rutrum erat ut, rhoncus massa. Nunc
  eros risus, dictum imperdiet libero vitae, laoreet dapibus lacus. Nunc eu
  pretium nibh. Cras mauris urna, laoreet ut posuere a, elementum eu lectus.
  Donec pellentesque laoreet eros id egestas. Nulla eu risus varius ipsum dapibus
  pharetra. <span class="tooltip" data-popup="#tip-1">Nulla quam arcu</span>,
  ornare in justo non, accumsan mattis eros. Vestibulum egestas erat a eros
  consequat auctor. Quisque aliquet, lorem eget lacinia aliquet, tellus tortor
  tempor quam, eget euismod arcu ipsum vel orci. Duis non consequat nisi. Morbi
  fermentum libero tellus, ut rutrum lacus sagittis ut. Morbi sem arcu, volutpat
  et malesuada ut, euismod ornare lacus.
</p>
<div class="tooltip-popup" id="tip-1">Hello <i>world</i></div>

$(function() {
  $('.tooltip')
    .on('mouseover', function(e) {
      var $t = $(this);
      var popup = $($t.data('popup'));
      popup.fadeIn().css({ left: e.pageX + 10, top: e.pageY + 10 });
    })
    .on('mouseout', function() {
      var $t = $(this);
      $($t.data('popup')).fadeOut();
    });
});

.tooltip {
  color: #555;
  border-bottom: 1px dashed #999;
}

.tooltip-popup {
  display: none;
  position: absolute;
  border: 3px solid #dd5;
  background: #55d;
  padding: 15px;
  color: #fff;
}

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen

Haku